@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/chrome/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/chrome/header.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAU1C,MAAM,WAAW,iBAAiB;IAChC,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,uEAAuE;IACvE,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,SAAS,EAAE,mBAAmB,CAAC;IAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,iBAAiB,EAAE,CAAC,SAAS,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAwCD,qGAAqG;AACrG,eAAO,MAAM,YAAY,GAAI,yGAU1B,iBAAiB,qDAgKnB,CAAC"}

package/dist/chrome/header.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { EuiButton, EuiButtonGroup, EuiButtonIcon, EuiLink, EuiText, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { DOCS_URL } from '../home/links.js';
+import { IsomerMark } from './isomer_mark.js';
+import { PrimitiveSearch } from './primitive_search.js';
+import { formatLocation, HOME } from './route.js';
+const MODE_OPTIONS = [
+    { id: 'dev', label: 'Workbench' },
+    { id: 'docs', label: 'Reference' },
+];
+const isMode = (id) => MODE_OPTIONS.some((option) => option.id === id);
+const COLOR_MODES = [
+    { id: 'system', label: 'System', iconType: 'display' },
+    { id: 'light', label: 'Light', iconType: 'sun' },
+    { id: 'dark', label: 'Dark', iconType: 'moon' },
+];
+const isColorMode = (id) => COLOR_MODES.some((option) => option.id === id);
+const ColorModePicker = ({ colorMode, onColorModeChange, }) => (_jsx(EuiButtonGroup, { css: css `
+      flex: none;
+    `, legend: "Color mode", buttonSize: "s", variant: "selection", idSelected: colorMode, display: "highlighted", onChange: (id) => isColorMode(id) && onColorModeChange(id), children: COLOR_MODES.map(({ id, label, iconType }) => (_jsx(EuiButtonIcon, { id, iconType, "aria-label": label, title: label }, id))) }));
+/** Title, the Workbench/Reference switch, search and color mode. The mark and title link to Home. */
+export const StudioHeader = ({ title = 'Isomer Studio', mode, appTitle, home = false, colorMode, onModeChange, onColorModeChange, onSelectPrimitive, onHome, }) => {
+    const { euiTheme } = useEuiTheme();
+    const bar = css `
+    flex: none;
+    height: ${euiTheme.size.xxxl};
+    padding: 0 ${euiTheme.size.base} 0 ${euiTheme.size.m};
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: ${euiTheme.size.s};
+    @media (max-width: 1200px) {
+      display: flex;
+      flex-wrap: nowrap;
+      padding-inline: ${euiTheme.size.s};
+    }
+  `;
+    const brandSlot = css `
+    min-width: 0;
+    flex-wrap: nowrap;
+    @media (max-width: 1200px) {
+      flex: 1 0 auto;
+    }
+  `;
+    const subtitle = css `
+    white-space: nowrap;
+    @media (max-width: 1024px) {
+      display: none;
+    }
+  `;
+    const titleText = css `
+    white-space: nowrap;
+    @media (max-width: 640px) {
+      display: none;
+    }
+  `;
+    const modeSlot = css `
+    flex: none;
+  `;
+    const modeLabel = css `
+    @media (max-width: 1200px) {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  `;
+    const toolsSlot = css `
+    min-width: 0;
+    flex-wrap: nowrap;
+    @media (max-width: 1200px) {
+      flex: 0 1 auto;
+    }
+  `;
+    const brand = css `
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: ${euiTheme.size.s};
+    border-radius: ${euiTheme.border.radius.small};
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+    &:focus-visible {
+      outline: 2px solid ${euiTheme.colors.primary};
+      outline-offset: 2px;
+    }
+  `;
+    return (_jsxs("header", { css: bar, children: [_jsxs("div", { css: [
+                    brandSlot,
+                    css `
+            display: flex;
+            align-items: center;
+            gap: ${euiTheme.size.s};
+          `,
+                ], children: [_jsxs("a", { href: formatLocation(HOME), css: brand, "aria-label": `${title} home`, onClick: (event) => {
+                            if (event.button !== 0 || event.metaKey || event.ctrlKey) {
+                                return;
+                            }
+                            event.preventDefault();
+                            onHome();
+                        }, children: [_jsx(IsomerMark, { size: 22 }), _jsx(EuiText, { size: "s", color: "ghost", css: titleText, children: _jsx("strong", { children: title }) })] }), home ? null : (_jsx(EuiText, { size: "xs", color: "ghost", css: subtitle, children: mode === undefined
+                            ? appTitle
+                            : mode === 'dev'
+                                ? 'Composition editor'
+                                : 'Primitive reference' }))] }), home ? (_jsx("span", { css: css `
+            @media (max-width: 1200px) {
+              display: none;
+            }
+          ` })) : (_jsx(EuiButtonGroup, { css: modeSlot, legend: "Studio mode", buttonSize: "s", variant: "selection", idSelected: mode ?? '', display: "highlighted", onChange: (id) => isMode(id) && onModeChange(id), children: MODE_OPTIONS.map(({ id, label }) => (_jsx(EuiButton, { id: id, title: label, iconType: id === 'dev' ? 'code' : 'document', children: _jsx("span", { css: modeLabel, children: label }) }, id))) })), _jsx("div", { css: [
+                    toolsSlot,
+                    css `
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: ${euiTheme.size.s};
+          `,
+                ], children: home ? (_jsx(EuiLink, { href: DOCS_URL, target: "_blank", external: true, color: "ghost", children: "Isomer docs" })) : (_jsxs(_Fragment, { children: [_jsx(PrimitiveSearch, { onSelectPrimitive }), _jsx(ColorModePicker, { colorMode, onColorModeChange })] })) })] }));
+};
+//# sourceMappingURL=header.js.map

package/dist/chrome/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/chrome/header.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React from 'react';\nimport {\n  EuiButton,\n  EuiButtonGroup,\n  EuiButtonIcon,\n  EuiLink,\n  EuiText,\n  useEuiTheme,\n} from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport { DOCS_URL } from '../home/links';\n\nimport type { ColorModePreference } from './color_mode';\nimport { IsomerMark } from './isomer_mark';\nimport { PrimitiveSearch } from './primitive_search';\nimport type { StudioMode } from './route';\nimport { formatLocation, HOME } from './route';\n\nconst MODE_OPTIONS: { id: StudioMode; label: string }[] = [\n  { id: 'dev', label: 'Workbench' },\n  { id: 'docs', label: 'Reference' },\n];\nconst isMode = (id: string): id is StudioMode =>\n  MODE_OPTIONS.some((option) => option.id === id);\n\nexport interface StudioHeaderProps {\n  /** Defaults to \"Isomer Studio\". */\n  title?: string | undefined;\n  /** Absent while an app or Home is open, which selects neither mode. */\n  mode: StudioMode | undefined;\n  /** The open app's title, shown in place of the mode's name. */\n  appTitle?: string | undefined;\n  /** On Home the switch, search and color mode give way to a docs link. */\n  home?: boolean | undefined;\n  colorMode: ColorModePreference;\n  onModeChange: (mode: StudioMode) => void;\n  onColorModeChange: (colorMode: ColorModePreference) => void;\n  onSelectPrimitive: (type: string) => void;\n  onHome: () => void;\n}\n\nconst COLOR_MODES: {\n  id: ColorModePreference;\n  label: string;\n  iconType: 'sun' | 'moon' | 'display';\n}[] = [\n  { id: 'system', label: 'System', iconType: 'display' },\n  { id: 'light', label: 'Light', iconType: 'sun' },\n  { id: 'dark', label: 'Dark', iconType: 'moon' },\n];\n\nconst isColorMode = (id: string): id is ColorModePreference =>\n  COLOR_MODES.some((option) => option.id === id);\n\nconst ColorModePicker = ({\n  colorMode,\n  onColorModeChange,\n}: Pick<StudioHeaderProps, 'colorMode' | 'onColorModeChange'>) => (\n  <EuiButtonGroup\n    css={css`\n      flex: none;\n    `}\n    legend=\"Color mode\"\n    buttonSize=\"s\"\n    variant=\"selection\"\n    idSelected={colorMode}\n    display=\"highlighted\"\n    onChange={(id) => isColorMode(id) && onColorModeChange(id)}>\n    {COLOR_MODES.map(({ id, label, iconType }) => (\n      <EuiButtonIcon\n        key={id}\n        {...{ id, iconType }}\n        aria-label={label}\n        title={label}\n      />\n    ))}\n  </EuiButtonGroup>\n);\n\n/** Title, the Workbench/Reference switch, search and color mode. The mark and title link to Home. */\nexport const StudioHeader = ({\n  title = 'Isomer Studio',\n  mode,\n  appTitle,\n  home = false,\n  colorMode,\n  onModeChange,\n  onColorModeChange,\n  onSelectPrimitive,\n  onHome,\n}: StudioHeaderProps) => {\n  const { euiTheme } = useEuiTheme();\n\n  const bar = css`\n    flex: none;\n    height: ${euiTheme.size.xxxl};\n    padding: 0 ${euiTheme.size.base} 0 ${euiTheme.size.m};\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: center;\n    gap: ${euiTheme.size.s};\n    @media (max-width: 1200px) {\n      display: flex;\n      flex-wrap: nowrap;\n      padding-inline: ${euiTheme.size.s};\n    }\n  `;\n  const brandSlot = css`\n    min-width: 0;\n    flex-wrap: nowrap;\n    @media (max-width: 1200px) {\n      flex: 1 0 auto;\n    }\n  `;\n  const subtitle = css`\n    white-space: nowrap;\n    @media (max-width: 1024px) {\n      display: none;\n    }\n  `;\n  const titleText = css`\n    white-space: nowrap;\n    @media (max-width: 640px) {\n      display: none;\n    }\n  `;\n  const modeSlot = css`\n    flex: none;\n  `;\n  const modeLabel = css`\n    @media (max-width: 1200px) {\n      position: absolute;\n      inline-size: 1px;\n      block-size: 1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  `;\n  const toolsSlot = css`\n    min-width: 0;\n    flex-wrap: nowrap;\n    @media (max-width: 1200px) {\n      flex: 0 1 auto;\n    }\n  `;\n  const brand = css`\n    flex: none;\n    display: inline-flex;\n    align-items: center;\n    gap: ${euiTheme.size.s};\n    border-radius: ${euiTheme.border.radius.small};\n    text-decoration: none;\n    &:hover {\n      text-decoration: none;\n    }\n    &:focus-visible {\n      outline: 2px solid ${euiTheme.colors.primary};\n      outline-offset: 2px;\n    }\n  `;\n\n  return (\n    <header css={bar}>\n      <div\n        css={[\n          brandSlot,\n          css`\n            display: flex;\n            align-items: center;\n            gap: ${euiTheme.size.s};\n          `,\n        ]}>\n        <a\n          href={formatLocation(HOME)}\n          css={brand}\n          aria-label={`${title} home`}\n          onClick={(event) => {\n            if (event.button !== 0 || event.metaKey || event.ctrlKey) {\n              return;\n            }\n            event.preventDefault();\n            onHome();\n          }}>\n          <IsomerMark size={22} />\n          <EuiText size=\"s\" color=\"ghost\" css={titleText}>\n            <strong>{title}</strong>\n          </EuiText>\n        </a>\n        {home ? null : (\n          <EuiText size=\"xs\" color=\"ghost\" css={subtitle}>\n            {mode === undefined\n              ? appTitle\n              : mode === 'dev'\n                ? 'Composition editor'\n                : 'Primitive reference'}\n          </EuiText>\n        )}\n      </div>\n      {home ? (\n        <span\n          css={css`\n            @media (max-width: 1200px) {\n              display: none;\n            }\n          `}\n        />\n      ) : (\n        <EuiButtonGroup\n          css={modeSlot}\n          legend=\"Studio mode\"\n          buttonSize=\"s\"\n          variant=\"selection\"\n          idSelected={mode ?? ''}\n          display=\"highlighted\"\n          onChange={(id) => isMode(id) && onModeChange(id)}>\n          {MODE_OPTIONS.map(({ id, label }) => (\n            <EuiButton\n              key={id}\n              id={id}\n              title={label}\n              iconType={id === 'dev' ? 'code' : 'document'}>\n              <span css={modeLabel}>{label}</span>\n            </EuiButton>\n          ))}\n        </EuiButtonGroup>\n      )}\n      <div\n        css={[\n          toolsSlot,\n          css`\n            display: flex;\n            justify-content: flex-end;\n            align-items: center;\n            gap: ${euiTheme.size.s};\n          `,\n        ]}>\n        {home ? (\n          <EuiLink href={DOCS_URL} target=\"_blank\" external color=\"ghost\">\n            Isomer docs\n          </EuiLink>\n        ) : (\n          <>\n            <PrimitiveSearch {...{ onSelectPrimitive }} />\n            <ColorModePicker {...{ colorMode, onColorModeChange }} />\n          </>\n        )}\n      </div>\n    </header>\n  );\n};\n"]}

package/dist/chrome/icon_data_uri.d.ts

@@ -0,0 +1,12 @@
+import type { ICON_VARS } from '@elastic/isomer-sdk';
+/** A colour per `--isomer-icon-*` slot, keyed by the slot's suffix. */
+export type IconColors = Readonly<Record<IconSlot, string>>;
+type IconSlot = (typeof ICON_VARS)[number] extends `--isomer-icon-${infer Slot}` ? Slot : never;
+/**
+ * A pack icon as an `<img>` source, so its markup never reaches the DOM.
+ *
+ * An image inherits neither CSS variables nor `currentColor`, so both resolve to `colors`.
+ */
+export declare const iconDataUri: (svg: string, colors: IconColors) => string;
+export {};
+//# sourceMappingURL=icon_data_uri.d.ts.map

package/dist/chrome/icon_data_uri.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_data_uri.d.ts","sourceRoot":"","sources":["../../src/chrome/icon_data_uri.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,uEAAuE;AACvE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5D,KAAK,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,SAAS,iBAAiB,MAAM,IAAI,EAAE,GAC5E,IAAI,GACJ,KAAK,CAAC;AAOV;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,QAAQ,UAAU,KAAG,MAW7D,CAAC"}

package/dist/chrome/icon_data_uri.js

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+const ICON_VAR = /var\(\s*--isomer-icon-([a-z]+)\s*(?:,\s*([^)]*?)\s*)?\)/g;
+const isSlot = (name, colors) => Object.hasOwn(colors, name);
+/**
+ * A pack icon as an `<img>` source, so its markup never reaches the DOM.
+ *
+ * An image inherits neither CSS variables nor `currentColor`, so both resolve to `colors`.
+ */
+export const iconDataUri = (svg, colors) => {
+    const painted = svg
+        .replace(ICON_VAR, (match, name, fallback) => isSlot(name, colors) ? colors[name] : (fallback ?? match))
+        .replace(/\bcurrentColor\b/g, colors.fg)
+        .replace(/^(\s*<svg)(?![^>]*\sxmlns=)/, '$1 xmlns="http://www.w3.org/2000/svg"');
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(painted)}`;
+};
+//# sourceMappingURL=icon_data_uri.js.map

package/dist/chrome/icon_data_uri.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_data_uri.js","sourceRoot":"","sources":["../../src/chrome/icon_data_uri.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,MAAM,QAAQ,GAAG,0DAA0D,CAAC;AAE5E,MAAM,MAAM,GAAG,CAAC,IAAY,EAAE,MAAkB,EAAoB,EAAE,CACpE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAE9B;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,MAAkB,EAAU,EAAE;IACrE,MAAM,OAAO,GAAG,GAAG;SAChB,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAY,EAAE,QAAiB,EAAE,EAAE,CAC5D,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,KAAK,CAAC,CAC1D;SACA,OAAO,CAAC,mBAAmB,EAAE,MAAM,CAAC,EAAE,CAAC;SACvC,OAAO,CACN,6BAA6B,EAC7B,uCAAuC,CACxC,CAAC;IACJ,OAAO,oCAAoC,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC;AAC3E,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 type { ICON_VARS } from '@elastic/isomer-sdk';\n\n/** A colour per `--isomer-icon-*` slot, keyed by the slot's suffix. */\nexport type IconColors = Readonly<Record<IconSlot, string>>;\n\ntype IconSlot = (typeof ICON_VARS)[number] extends `--isomer-icon-${infer Slot}`\n  ? Slot\n  : never;\n\nconst ICON_VAR = /var\\(\\s*--isomer-icon-([a-z]+)\\s*(?:,\\s*([^)]*?)\\s*)?\\)/g;\n\nconst isSlot = (name: string, colors: IconColors): name is IconSlot =>\n  Object.hasOwn(colors, name);\n\n/**\n * A pack icon as an `<img>` source, so its markup never reaches the DOM.\n *\n * An image inherits neither CSS variables nor `currentColor`, so both resolve to `colors`.\n */\nexport const iconDataUri = (svg: string, colors: IconColors): string => {\n  const painted = svg\n    .replace(ICON_VAR, (match, name: string, fallback?: string) =>\n      isSlot(name, colors) ? colors[name] : (fallback ?? match)\n    )\n    .replace(/\\bcurrentColor\\b/g, colors.fg)\n    .replace(\n      /^(\\s*<svg)(?![^>]*\\sxmlns=)/,\n      '$1 xmlns=\"http://www.w3.org/2000/svg\"'\n    );\n  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(painted)}`;\n};\n"]}

package/dist/chrome/isomer_mark.d.ts

@@ -0,0 +1,17 @@
+/** The four balls of the Isomer logo, in the logo's own colors. */
+export declare const ISOMER_MARK: {
+    readonly yellow: "#FEC514";
+    readonly teal: "#00BFB3";
+    readonly pink: "#F04E98";
+    readonly blue: "#1BA9F5";
+};
+/** Paths and fills from `docs/logo.svg`, which `isomer_mark.test.ts` keeps in step. */
+export declare const ISOMER_LOGO_PATHS: ReadonlyArray<{
+    d: string;
+    fill: string;
+}>;
+/** The Isomer mark at `size` pixels, decorative. */
+export declare const IsomerMark: ({ size }: {
+    size: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=isomer_mark.d.ts.map

package/dist/chrome/isomer_mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isomer_mark.d.ts","sourceRoot":"","sources":["../../src/chrome/isomer_mark.tsx"],"names":[],"mappings":"AASA,mEAAmE;AACnE,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAiCxE,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,UAAU,GAAI,UAAU;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,qDAWpD,CAAC"}

package/dist/chrome/isomer_mark.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** The four balls of the Isomer logo, in the logo's own colors. */
+export const ISOMER_MARK = {
+    yellow: '#FEC514',
+    teal: '#00BFB3',
+    pink: '#F04E98',
+    blue: '#1BA9F5',
+};
+/** Paths and fills from `docs/logo.svg`, which `isomer_mark.test.ts` keeps in step. */
+export const ISOMER_LOGO_PATHS = [
+    {
+        d: 'M16 31C19.3137 31 22 28.3137 22 25C22 21.6863 19.3137 19 16 19C12.6863 19 10 21.6863 10 25C10 28.3137 12.6863 31 16 31Z',
+        fill: ISOMER_MARK.teal,
+    },
+    {
+        d: 'M16 19C19.3137 19 22 21.6863 22 25C20.3287 26.2553 18.2511 27 16 27C13.7486 27 11.6714 26.2555 10 25C10 21.6863 12.6863 19 16 19Z',
+        fill: '#FF957D',
+    },
+    {
+        d: 'M24 9C24 4.58172 20.4183 1 16 1C11.5817 1 8 4.58172 8 9C8 13.4183 11.5817 17 16 17C20.4183 17 24 13.4183 24 9Z',
+        fill: ISOMER_MARK.yellow,
+    },
+    {
+        d: 'M16 7C19.1578 7 21.972 8.46505 23.8047 10.751C23.006 14.3267 19.8166 17 16 17C12.1834 17 8.99298 14.3268 8.19434 10.751C10.027 8.46477 12.842 7 16 7Z',
+        fill: ISOMER_MARK.blue,
+    },
+    {
+        d: 'M6 24C8.76142 24 11 21.7614 11 19C11 16.2386 8.76142 14 6 14C3.23858 14 1 16.2386 1 19C1 21.7614 3.23858 24 6 24Z',
+        fill: ISOMER_MARK.pink,
+    },
+    {
+        d: 'M6.4502 14.0205C9.00066 14.2481 11 16.3903 11 19C11 20.9178 9.91966 22.5822 8.33496 23.4209C6.87813 21.6836 6 19.4446 6 17C6 15.9625 6.15693 14.9615 6.4502 14.0205Z',
+        fill: '#FF957D',
+    },
+    {
+        d: 'M26 24C28.7614 24 31 21.7614 31 19C31 16.2386 28.7614 14 26 14C23.2386 14 21 16.2386 21 19C21 21.7614 23.2386 24 26 24Z',
+        fill: ISOMER_MARK.pink,
+    },
+    {
+        d: 'M25.5488 14.0205C25.8422 14.9616 26 15.9624 26 17C26 19.4449 25.1211 21.6836 23.6641 23.4209C22.0798 22.582 21 20.9175 21 19C21 16.3907 22.9988 14.2486 25.5488 14.0205Z',
+        fill: '#FF957D',
+    },
+];
+/** The Isomer mark at `size` pixels, decorative. */
+export const IsomerMark = ({ size }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", "aria-hidden": true, children: ISOMER_LOGO_PATHS.map(({ d, fill }) => (_jsx("path", { d, fill }, d))) }));
+//# sourceMappingURL=isomer_mark.js.map

package/dist/chrome/isomer_mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isomer_mark.js","sourceRoot":"","sources":["../../src/chrome/isomer_mark.tsx"],"names":[],"mappings":";AASA,mEAAmE;AACnE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;CACP,CAAC;AAEX,uFAAuF;AACvF,MAAM,CAAC,MAAM,iBAAiB,GAA+C;IAC3E;QACE,CAAC,EAAE,yHAAyH;QAC5H,IAAI,EAAE,WAAW,CAAC,IAAI;KACvB;IACD;QACE,CAAC,EAAE,mIAAmI;QACtI,IAAI,EAAE,SAAS;KAChB;IACD;QACE,CAAC,EAAE,gHAAgH;QACnH,IAAI,EAAE,WAAW,CAAC,MAAM;KACzB;IACD;QACE,CAAC,EAAE,uJAAuJ;QAC1J,IAAI,EAAE,WAAW,CAAC,IAAI;KACvB;IACD;QACE,CAAC,EAAE,mHAAmH;QACtH,IAAI,EAAE,WAAW,CAAC,IAAI;KACvB;IACD;QACE,CAAC,EAAE,sKAAsK;QACzK,IAAI,EAAE,SAAS;KAChB;IACD;QACE,CAAC,EAAE,yHAAyH;QAC5H,IAAI,EAAE,WAAW,CAAC,IAAI;KACvB;IACD;QACE,CAAC,EAAE,0KAA0K;QAC7K,IAAI,EAAE,SAAS;KAChB;CACF,CAAC;AAEF,oDAAoD;AACpD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CACxD,cACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACE,IAAI,YAChB,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACtC,eAAoB,CAAC,EAAE,IAAI,IAAhB,CAAC,CAAqB,CAClC,CAAC,GACE,CACP,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';\n\n/** The four balls of the Isomer logo, in the logo's own colors. */\nexport const ISOMER_MARK = {\n  yellow: '#FEC514',\n  teal: '#00BFB3',\n  pink: '#F04E98',\n  blue: '#1BA9F5',\n} as const;\n\n/** Paths and fills from `docs/logo.svg`, which `isomer_mark.test.ts` keeps in step. */\nexport const ISOMER_LOGO_PATHS: ReadonlyArray<{ d: string; fill: string }> = [\n  {\n    d: 'M16 31C19.3137 31 22 28.3137 22 25C22 21.6863 19.3137 19 16 19C12.6863 19 10 21.6863 10 25C10 28.3137 12.6863 31 16 31Z',\n    fill: ISOMER_MARK.teal,\n  },\n  {\n    d: 'M16 19C19.3137 19 22 21.6863 22 25C20.3287 26.2553 18.2511 27 16 27C13.7486 27 11.6714 26.2555 10 25C10 21.6863 12.6863 19 16 19Z',\n    fill: '#FF957D',\n  },\n  {\n    d: 'M24 9C24 4.58172 20.4183 1 16 1C11.5817 1 8 4.58172 8 9C8 13.4183 11.5817 17 16 17C20.4183 17 24 13.4183 24 9Z',\n    fill: ISOMER_MARK.yellow,\n  },\n  {\n    d: 'M16 7C19.1578 7 21.972 8.46505 23.8047 10.751C23.006 14.3267 19.8166 17 16 17C12.1834 17 8.99298 14.3268 8.19434 10.751C10.027 8.46477 12.842 7 16 7Z',\n    fill: ISOMER_MARK.blue,\n  },\n  {\n    d: 'M6 24C8.76142 24 11 21.7614 11 19C11 16.2386 8.76142 14 6 14C3.23858 14 1 16.2386 1 19C1 21.7614 3.23858 24 6 24Z',\n    fill: ISOMER_MARK.pink,\n  },\n  {\n    d: 'M6.4502 14.0205C9.00066 14.2481 11 16.3903 11 19C11 20.9178 9.91966 22.5822 8.33496 23.4209C6.87813 21.6836 6 19.4446 6 17C6 15.9625 6.15693 14.9615 6.4502 14.0205Z',\n    fill: '#FF957D',\n  },\n  {\n    d: 'M26 24C28.7614 24 31 21.7614 31 19C31 16.2386 28.7614 14 26 14C23.2386 14 21 16.2386 21 19C21 21.7614 23.2386 24 26 24Z',\n    fill: ISOMER_MARK.pink,\n  },\n  {\n    d: 'M25.5488 14.0205C25.8422 14.9616 26 15.9624 26 17C26 19.4449 25.1211 21.6836 23.6641 23.4209C22.0798 22.582 21 20.9175 21 19C21 16.3907 22.9988 14.2486 25.5488 14.0205Z',\n    fill: '#FF957D',\n  },\n];\n\n/** The Isomer mark at `size` pixels, decorative. */\nexport const IsomerMark = ({ size }: { size: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 32 32\"\n    fill=\"none\"\n    aria-hidden={true}>\n    {ISOMER_LOGO_PATHS.map(({ d, fill }) => (\n      <path key={d} {...{ d, fill }} />\n    ))}\n  </svg>\n);\n"]}

package/dist/chrome/nav.d.ts

@@ -0,0 +1,22 @@
+import type { StudioMode } from './route.js';
+export declare const NAV_WIDTH: {
+    readonly open: 272;
+    readonly closed: 72;
+    readonly compactAt: 1120;
+};
+export interface StudioNavProps {
+    mode: StudioMode;
+    page: string;
+    /** The open app's id; while one is open, no primitive is active. */
+    app?: string | undefined;
+    /** The open app's `path`, which picks its active page. */
+    appPath?: string | undefined;
+    isOpen: boolean;
+    isCompact?: boolean | undefined;
+    onToggle: () => void;
+    onSelect: (page: string) => void;
+    onSelectApp: (id: string, path?: string) => void;
+}
+/** The Gallery link and the config's apps with their pages, then primitives under collapsible groups, narrowed by a filter. */
+export declare const StudioNav: ({ mode, page, app, appPath, isOpen, isCompact, onToggle, onSelect, onSelectApp, }: StudioNavProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=nav.d.ts.map

package/dist/chrome/nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../src/chrome/nav.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,eAAO,MAAM,SAAS;;;;CAIZ,CAAC;AA6CX,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAiTD,+HAA+H;AAC/H,eAAO,MAAM,SAAS,GAAI,mFAUvB,cAAc,qDAkQhB,CAAC"}

package/dist/chrome/nav.js

@@ -0,0 +1,306 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import React, { useMemo, useState } from 'react';
+import { EuiButtonIcon, EuiFieldSearch, EuiIcon, transparentize, useEuiScrollBar, useEuiTheme, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { searchPrimitives } from '../model/search.js';
+import { useStudio } from '../studio_context.js';
+import { useAccent } from './accent.js';
+import { activeAppPage, appPageSections, filterAppPages } from './app_pages.js';
+import { useClosedNavGroups } from './nav_groups.js';
+import { navPacks } from './nav_sections.js';
+import { Glyph, PrimitiveGlyph } from './primitive_glyph.js';
+import { PrimitivePeek } from './primitive_peek.js';
+import { GALLERY } from './route.js';
+export const NAV_WIDTH = {
+    open: 272,
+    closed: 72,
+    compactAt: 1120,
+};
+const NAV_GLYPH_SIZE = 17;
+const ROW_HEIGHT = 32;
+const ROW_GAP = 4;
+const HOVER_ROW = 'rgba(255, 255, 255, 0.08)';
+const ACTIVE_LABEL = '#FFFFFF';
+const LABEL = 'rgba(255, 255, 255, 0.86)';
+const GROUP_LABEL = 'rgba(255, 255, 255, 0.6)';
+const GLYPH_OPACITY = 0.6;
+/** Clears the group header's inset, chevron, and gap, then indents a further `s`. */
+const itemInset = ({ xs, m }) => `calc(${xs} + ${m} + ${xs})`;
+/** Lines an app's pages up with its label, past its glyph and gap. */
+const pageInset = ({ m, s }) => `calc(${m} + ${NAV_GLYPH_SIZE}px + ${s})`;
+/** An accent tint behind the active entry, with a bar on its leading edge. */
+const activeMark = ({ bright }) => css `
+  background: ${transparentize(bright, 0.18)};
+  box-shadow: inset 2px 0 0 ${bright};
+  color: ${ACTIVE_LABEL};
+`;
+const NavIcon = ({ isActive, isRail = false, children, }) => (_jsx("span", { css: css `
+      display: inline-flex;
+      flex: none;
+      opacity: ${isActive || isRail ? 1 : GLYPH_OPACITY};
+    `, children: children }));
+const GALLERY_ITEM = {
+    id: GALLERY,
+    label: 'Gallery',
+    icon: (_jsx(EuiIcon, { type: "grid", css: css `
+        inline-size: ${NAV_GLYPH_SIZE}px;
+        block-size: ${NAV_GLYPH_SIZE}px;
+      `, "aria-hidden": true })),
+    isPrimitive: false,
+};
+const withPeek = ({ id, isPrimitive }, element) => isPrimitive ? _jsx(PrimitivePeek, { type: id, children: element }) : element;
+const RailEntry = ({ item, isActive, accent, onSelect, }) => {
+    const { id, label, icon } = item;
+    return withPeek(item, _jsx(EuiButtonIcon, { display: "empty", size: "s", color: "text", iconType: () => (_jsx(NavIcon, { isActive, isRail: true, children: icon })), css: css `
+        flex: none;
+        inline-size: ${ROW_HEIGHT}px;
+        block-size: ${ROW_HEIGHT}px;
+        color: ${ACTIVE_LABEL};
+        ${isActive ? activeMark(accent) : ''}
+      `, "aria-label": label, "aria-current": isActive ? 'page' : undefined, onClick: () => onSelect(id) }));
+};
+const Row = ({ item, isActive, accent, onSelect, inset, children, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { id, label, icon } = item;
+    return (_jsxs("li", { css: css `
+        flex: none;
+      `, children: [withPeek(item, _jsxs("button", { type: "button", "aria-current": isActive ? 'page' : undefined, onClick: () => onSelect(id), css: css `
+            display: flex;
+            align-items: center;
+            gap: ${euiTheme.size.s};
+            inline-size: 100%;
+            block-size: ${ROW_HEIGHT}px;
+            padding-inline: ${inset ?? itemInset(euiTheme.size)}
+              ${euiTheme.size.s};
+            border-radius: ${euiTheme.border.radius.small};
+            color: ${LABEL};
+            font-size: 14px;
+            font-weight: ${euiTheme.font.weight.regular};
+            text-align: start;
+
+            &:hover {
+              background: ${HOVER_ROW};
+              color: ${ACTIVE_LABEL};
+            }
+
+            ${isActive ? activeMark(accent) : ''}
+
+            &:focus-visible {
+              outline: ${euiTheme.focus.width} solid ${accent.bright};
+              outline-offset: -${euiTheme.focus.width};
+            }
+          `, children: [icon ? _jsx(NavIcon, { isActive, children: icon }) : null, _jsx("span", { css: css `
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            `, children: label })] })), children] }));
+};
+const subList = (gap) => css `
+  display: flex;
+  flex-direction: column;
+  gap: ${gap}px;
+  margin: ${gap}px 0 0;
+  padding: 0;
+  list-style: none;
+`;
+const appItem = ({ id, title, icon }) => ({
+    id,
+    label: title,
+    icon: _jsx(Glyph, { svg: icon?.svg, label: title, size: NAV_GLYPH_SIZE }),
+    isPrimitive: false,
+});
+/** An app's row, with its pages under it in their sections. */
+const AppRow = ({ app, openApp, appPath, filter, accent, onSelectApp, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { id, title, pages = [] } = app;
+    const item = useMemo(() => appItem(app), [app]);
+    const isOpen = openApp === id;
+    const active = isOpen ? activeAppPage(pages, appPath) : undefined;
+    const sections = appPageSections(filterAppPages(pages, filter));
+    const inset = pageInset(euiTheme.size);
+    const pageRows = (listed) => listed.map(({ path, title: label }) => (_jsx(Row, { item: { id: path, label, isPrimitive: false }, isActive: active?.path === path, onSelect: (next) => onSelectApp(id, next), accent, inset }, path)));
+    return (_jsx(Row, { item, accent, inset: euiTheme.size.m, isActive: isOpen && active === undefined, onSelect: () => onSelectApp(id), children: sections.length ? (_jsx("ul", { css: subList(ROW_GAP), "aria-label": `${title} pages`, children: sections.map(({ title: section, pages: listed }) => section === undefined ? (_jsx(React.Fragment, { children: pageRows(listed) }, "unsectioned")) : (_jsxs("li", { children: [_jsx("h4", { css: css `
+                    margin: ${euiTheme.size.xs} 0 0;
+                    padding-inline: ${inset} ${euiTheme.size.s};
+                    color: ${GROUP_LABEL};
+                    font-size: 11px;
+                    font-weight: ${euiTheme.font.weight.semiBold};
+                    letter-spacing: 0.08em;
+                    line-height: ${ROW_HEIGHT}px;
+                    text-transform: uppercase;
+                  `, children: section }), _jsx("ul", { css: subList(ROW_GAP), "aria-label": section, children: pageRows(listed) })] }, `section:${section}`))) })) : null }));
+};
+const Group = ({ title, isOpen, onToggle, children, }) => {
+    const { euiTheme } = useEuiTheme();
+    return (_jsxs("div", { css: css `
+        display: flex;
+        flex-direction: column;
+        flex: none;
+      `, children: [_jsx("h3", { css: css `
+          margin: 0;
+        `, children: _jsxs("button", { type: "button", "aria-expanded": isOpen, onClick: onToggle, css: css `
+            display: flex;
+            align-items: center;
+            gap: ${euiTheme.size.xs};
+            inline-size: 100%;
+            block-size: ${ROW_HEIGHT}px;
+            padding-inline: ${euiTheme.size.xs};
+            color: ${GROUP_LABEL};
+            font-size: 11px;
+            font-weight: ${euiTheme.font.weight.semiBold};
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            text-align: start;
+
+            &:hover {
+              color: ${ACTIVE_LABEL};
+            }
+
+            &:focus-visible {
+              outline: ${euiTheme.focus.width} solid ${ACTIVE_LABEL};
+              outline-offset: -${euiTheme.focus.width};
+            }
+          `, children: [_jsx(EuiIcon, { type: isOpen ? 'chevronSingleDown' : 'chevronSingleRight', size: "s", "aria-hidden": true }), title] }) }), isOpen ? (_jsx("ul", { css: css `
+            display: flex;
+            flex-direction: column;
+            gap: ${ROW_GAP}px;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+          `, children: children })) : null] }));
+};
+/** The Gallery link and the config's apps with their pages, then primitives under collapsible groups, narrowed by a filter. */
+export const StudioNav = ({ mode, page, app, appPath = '', isOpen, isCompact = false, onToggle, onSelect, onSelectApp, }) => {
+    const { euiTheme } = useEuiTheme();
+    const accent = useAccent(app === undefined ? mode : 'docs');
+    const scrollbar = useEuiScrollBar();
+    const { runtime, apps, docs: { primitives }, } = useStudio();
+    const appItems = useMemo(() => apps.map(appItem), [apps]);
+    const [filter, setFilter] = useState('');
+    const { closed, setOpen } = useClosedNavGroups();
+    const separatePacks = runtime.packs.length > 1;
+    const packs = useMemo(() => {
+        const labels = new Map(primitives.map(({ type, label }) => [type, label]));
+        const matched = new Set(searchPrimitives(primitives, filter).map(({ type }) => type));
+        return navPacks(runtime.packs.map((pack) => ({
+            id: pack.id,
+            groups: pack.authoring?.groups ?? [],
+            types: pack.primitives.map(({ type }) => type),
+        })), (type) => labels.get(type) ?? type, (type) => matched.has(type), separatePacks);
+    }, [primitives, runtime.packs, filter, separatePacks]);
+    const listed = useMemo(() => {
+        const byType = new Map(primitives.map((doc) => [doc.type, doc]));
+        return packs.map((pack) => ({
+            ...pack,
+            groups: pack.groups.map((group) => ({
+                ...group,
+                items: group.types.flatMap((type) => {
+                    const doc = byType.get(type);
+                    return doc
+                        ? [
+                            {
+                                id: type,
+                                label: doc.label,
+                                icon: _jsx(PrimitiveGlyph, { type, size: NAV_GLYPH_SIZE }),
+                                isPrimitive: true,
+                            },
+                        ]
+                        : [];
+                }),
+            })),
+        }));
+    }, [packs, primitives]);
+    const isGroupOpen = (key) => Boolean(filter) || !closed.has(key);
+    const toggleGroup = (key) => {
+        if (!filter) {
+            setOpen(key, closed.has(key));
+        }
+    };
+    const column = css `
+    display: flex;
+    flex-direction: column;
+    gap: ${euiTheme.size.xs};
+    min-block-size: 0;
+    padding-block: 0 ${euiTheme.size.m};
+    overflow: hidden;
+    ${isCompact
+        ? css `
+            position: absolute;
+            inset-block: 0;
+            inset-inline-start: 0;
+            z-index: 1;
+            inline-size: ${isOpen ? NAV_WIDTH.open : NAV_WIDTH.closed}px;
+            background: ${isOpen ? euiTheme.colors.backgroundBasePlain : 'transparent'};
+            border-inline-end: ${isOpen ? euiTheme.border.thin : 'none'};
+            box-shadow: ${isOpen ? '0 8px 24px rgba(0, 0, 0, 0.28)' : 'none'};
+            transition: inline-size ${euiTheme.animation.normal}
+              ${euiTheme.animation.resistance};
+          `
+        : ''}
+  `;
+    const fieldInset = css `
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: ${euiTheme.size.xs};
+    flex: none;
+    margin-inline: ${euiTheme.size.s};
+    margin-block-end: ${euiTheme.size.s};
+    min-block-size: ${ROW_HEIGHT}px;
+    justify-content: ${isOpen ? 'flex-start' : 'center'};
+  `;
+    const scroller = css `
+    flex: 1;
+    min-block-size: 0;
+    display: flex;
+    flex-direction: column;
+    gap: ${euiTheme.size.s};
+    padding-inline: ${isOpen ? euiTheme.size.s : 0};
+    overflow: hidden auto;
+    ${scrollbar}
+  `;
+    const rail = css `
+    flex: none;
+    inline-size: ${NAV_WIDTH.closed}px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ${ROW_GAP}px;
+  `;
+    const packHeading = css `
+    flex: none;
+    margin: ${euiTheme.size.s} ${euiTheme.size.xs} 0;
+    color: ${euiTheme.colors.textSubdued};
+    font-size: 11px;
+    font-weight: ${euiTheme.font.weight.semiBold};
+    text-transform: uppercase;
+  `;
+    const plainList = css `
+    display: flex;
+    flex-direction: column;
+    gap: ${ROW_GAP}px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  `;
+    const activePage = app === undefined ? page : undefined;
+    const rows = (items) => items.map((item) => (_jsx(Row, { item, accent, onSelect, isActive: item.id === activePage }, item.id)));
+    const appRows = apps.map((entry) => (_jsx(AppRow, { app: entry, openApp: app, appPath, filter, accent, onSelectApp }, entry.id)));
+    const toggleLabel = `${isOpen ? 'Collapse' : 'Expand'} primitive navigation`;
+    return (_jsxs("nav", { css: column, "aria-label": "Primitives", children: [_jsxs("div", { css: fieldInset, children: [isOpen ? (_jsx("div", { css: css `
+              flex: 1 1 auto;
+              min-inline-size: 0;
+            `, children: _jsx(EuiFieldSearch, { compressed: true, fullWidth: true, placeholder: "Filter primitives", value: filter, onChange: ({ target: { value } }) => setFilter(value), "aria-label": "Filter primitives" }) })) : null, _jsx(EuiButtonIcon, { display: "empty", size: "s", color: "text", css: css `
+            flex: none;
+            inline-size: ${ROW_HEIGHT}px;
+            block-size: ${ROW_HEIGHT}px;
+            color: ${ACTIVE_LABEL};
+          `, iconType: isOpen ? 'transitionRightIn' : 'transitionLeftIn', "aria-label": toggleLabel, title: toggleLabel, "aria-expanded": isOpen, onClick: onToggle })] }), _jsx("div", { css: scroller, children: isOpen ? (_jsxs(_Fragment, { children: [_jsxs("ul", { css: plainList, children: [appRows, _jsx(Row, { item: GALLERY_ITEM, isActive: GALLERY === activePage, inset: euiTheme.size.m, accent, onSelect })] }), listed.map((pack) => (_jsxs(React.Fragment, { children: [separatePacks ? _jsx("h2", { css: packHeading, children: pack.label }) : null, pack.groups.map((group) => (_jsx(Group, { title: group.title, isOpen: isGroupOpen(group.key), onToggle: () => toggleGroup(group.key), children: rows(group.items) }, group.key)))] }, pack.id)))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { css: rail, children: [appItems.map((item) => (_jsx(RailEntry, { item, accent, onSelect: (id) => onSelectApp(id), isActive: item.id === app }, item.id))), _jsx(RailEntry, { item: GALLERY_ITEM, isActive: GALLERY === activePage, accent, onSelect })] }), listed
+                            .flatMap((pack) => pack.groups)
+                            .map((group) => (_jsxs("div", { css: rail, children: [_jsx("div", { role: "separator", css: css `
+                      width: ${NAV_GLYPH_SIZE}px;
+                      margin-block: ${euiTheme.size.xs};
+                      border-top: 1px solid ${euiTheme.colors.textSubdued};
+                    ` }), group.items.map((item) => (_jsx(RailEntry, { item, accent, onSelect, isActive: item.id === activePage }, item.id)))] }, group.key)))] })) })] }));
+};
+//# sourceMappingURL=nav.js.map