@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/CompareEnvironmentsDialog/ComparisonValueCell.esm.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Tooltip from '@massdriver/ui/Tooltip';
+import stylin from '@massdriver/ui/stylin';
+
+const TRUNCATE_LENGTH = 64;
+const formatValue = (value) => {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+const ComparisonValueCell = ({
+  side,
+  isDifferent,
+  isMissing
+}) => {
+  const present = side?.present === true;
+  if (!present) {
+    return isMissing ? /* @__PURE__ */ jsx(MissingPill, { children: "not set" }) : /* @__PURE__ */ jsx(Missing, { children: "\u2014" });
+  }
+  const value = side?.value;
+  if (value == null) {
+    return /* @__PURE__ */ jsx(NullLiteral, { children: "null" });
+  }
+  const display = formatValue(value);
+  const truncated = display.length > TRUNCATE_LENGTH;
+  const visible = truncated ? `${display.slice(0, TRUNCATE_LENGTH)}\u2026` : display;
+  const cell = /* @__PURE__ */ jsx(ValueText, { isDifferent, children: visible });
+  return truncated ? /* @__PURE__ */ jsx(Tooltip, { title: display, arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: cell }) }) : cell;
+};
+const ValueText = stylin(Box, ["isDifferent"])(
+  ({ theme, isDifferent }) => ({
+    fontFamily: theme.typography.fontFamilyMono,
+    fontSize: theme.typography.caption.fontSize,
+    color: isDifferent ? theme.palette.text.primary : theme.palette.text.secondary,
+    fontWeight: isDifferent ? 600 : 400,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  })
+);
+const NullLiteral = stylin(Box)(({ theme }) => ({
+  fontStyle: "italic",
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamilyMono,
+  fontSize: theme.typography.caption.fontSize
+}));
+const Missing = stylin(Box)(({ theme }) => ({
+  fontStyle: "italic",
+  color: theme.palette.text.disabled,
+  fontSize: theme.typography.caption.fontSize
+}));
+const MissingPill = stylin(Box)(({ theme }) => ({
+  display: "inline-block",
+  fontStyle: "italic",
+  fontSize: theme.typography.caption.fontSize,
+  color: theme.palette.error.main,
+  backgroundColor: `${theme.palette.error.main}14`,
+  padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+  borderRadius: 1
+}));
+
+export { ComparisonValueCell, ComparisonValueCell as default };
+//# sourceMappingURL=ComparisonValueCell.esm.js.map

package/dist/features/environment/CompareEnvironmentsDialog/ComparisonValueCell.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonValueCell.esm.js","sources":["../../../../src/features/environment/CompareEnvironmentsDialog/ComparisonValueCell.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport stylin from '@massdriver/ui/stylin';\nimport type { ComparisonSide } from './flattenComparison';\n\nconst TRUNCATE_LENGTH = 64;\n\nconst formatValue = (value: unknown): string => {\n  if (typeof value === 'string') return value;\n  try {\n    return JSON.stringify(value);\n  } catch {\n    return String(value);\n  }\n};\n\n/** Renders one side of a comparison row (source or target value). */\nexport const ComparisonValueCell = ({\n  side,\n  isDifferent,\n  isMissing,\n}: {\n  side?: ComparisonSide | null;\n  isDifferent: boolean;\n  isMissing: boolean;\n}) => {\n  const present = side?.present === true;\n\n  if (!present) {\n    return isMissing ? (\n      <MissingPill>not set</MissingPill>\n    ) : (\n      <Missing>—</Missing>\n    );\n  }\n\n  const value = side?.value;\n  if (value == null) {\n    return <NullLiteral>null</NullLiteral>;\n  }\n\n  const display = formatValue(value);\n  const truncated = display.length > TRUNCATE_LENGTH;\n  const visible = truncated ? `${display.slice(0, TRUNCATE_LENGTH)}…` : display;\n\n  const cell = <ValueText isDifferent={isDifferent}>{visible}</ValueText>;\n\n  return truncated ? (\n    <Tooltip title={display} arrow placement=\"top\">\n      <span>{cell}</span>\n    </Tooltip>\n  ) : (\n    cell\n  );\n};\n\nexport default ComparisonValueCell;\n\nconst ValueText = stylin(Box, ['isDifferent'])(\n  ({ theme, isDifferent }: { theme: any; isDifferent: boolean }) => ({\n    fontFamily: theme.typography.fontFamilyMono,\n    fontSize: theme.typography.caption.fontSize,\n    color: isDifferent\n      ? theme.palette.text.primary\n      : theme.palette.text.secondary,\n    fontWeight: isDifferent ? 600 : 400,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n);\n\nconst NullLiteral = stylin(Box)(({ theme }: { theme: any }) => ({\n  fontStyle: 'italic',\n  color: theme.palette.text.secondary,\n  fontFamily: theme.typography.fontFamilyMono,\n  fontSize: theme.typography.caption.fontSize,\n}));\n\nconst Missing = stylin(Box)(({ theme }: { theme: any }) => ({\n  fontStyle: 'italic',\n  color: theme.palette.text.disabled,\n  fontSize: theme.typography.caption.fontSize,\n}));\n\nconst MissingPill = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-block',\n  fontStyle: 'italic',\n  fontSize: theme.typography.caption.fontSize,\n  color: theme.palette.error.main,\n  backgroundColor: `${theme.palette.error.main}14`,\n  padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,\n  borderRadius: 1,\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/CompareEnvironmentsDialog/ResultsStep.esm.js

@@ -0,0 +1,202 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import Switch from '@massdriver/ui/Switch';
+import Select, { MenuItem } from '@massdriver/ui/Select';
+import Alert from '@massdriver/ui/Alert';
+import Button from '@massdriver/ui/Button';
+import DataList from '@massdriver/ui/DataList';
+import stylin from '@massdriver/ui/stylin';
+import ChevronLeftIcon from '@massdriver/ui/icons/ChevronLeftIcon';
+import { buildCompareColumns } from './compareColumns.esm.js';
+
+const ALL_COMPONENTS = "__all__";
+const ResultsStep = ({
+  rows,
+  sourceName,
+  targetName,
+  loading,
+  onChangeSelection
+}) => {
+  const [hideEqual, setHideEqual] = useState(true);
+  const [componentFilter, setComponentFilter] = useState(ALL_COMPONENTS);
+  const componentOptions = useMemo(() => {
+    const seen = /* @__PURE__ */ new Map();
+    rows.forEach((row) => {
+      if (!seen.has(row.component.id)) {
+        seen.set(row.component.id, row.component.name);
+      }
+    });
+    return Array.from(seen, ([id, name]) => ({ id, name })).sort(
+      (first, second) => first.name.localeCompare(second.name)
+    );
+  }, [rows]);
+  const filteredRows = useMemo(
+    () => rows.filter((row) => {
+      if (hideEqual && row.status === "equal") return false;
+      if (componentFilter !== ALL_COMPONENTS && row.component.id !== componentFilter) {
+        return false;
+      }
+      return true;
+    }),
+    [rows, hideEqual, componentFilter]
+  );
+  const columns = useMemo(
+    () => buildCompareColumns({ leftLabel: sourceName, rightLabel: targetName }),
+    [sourceName, targetName]
+  );
+  const differingCount = useMemo(
+    () => rows.filter((row) => row.status !== "equal").length,
+    [rows]
+  );
+  const componentCount = useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    rows.forEach((row) => seen.add(row.component.id));
+    return seen.size;
+  }, [rows]);
+  const allEqual = rows.length > 0 && differingCount === 0;
+  return /* @__PURE__ */ jsxs(Root, { children: [
+    /* @__PURE__ */ jsxs(HeaderBar, { children: [
+      /* @__PURE__ */ jsx(
+        BackButton,
+        {
+          variant: "text",
+          size: "small",
+          startIcon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+          onClick: onChangeSelection,
+          children: "Change selection"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Title, { children: [
+        /* @__PURE__ */ jsx(EnvName, { children: sourceName || "Environment 1" }),
+        /* @__PURE__ */ jsx(ArrowText, { children: "\u2194" }),
+        /* @__PURE__ */ jsx(EnvName, { children: targetName || "Environment 2" })
+      ] }),
+      /* @__PURE__ */ jsx(HeaderSpacer, {})
+    ] }),
+    /* @__PURE__ */ jsxs(SummaryRow, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: allEqual ? "No differences." : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Strong, { children: differingCount }),
+        " ",
+        differingCount === 1 ? "difference" : "differences",
+        " across",
+        " ",
+        /* @__PURE__ */ jsx(Strong, { children: componentCount }),
+        " ",
+        componentCount === 1 ? "component" : "components"
+      ] }) }),
+      /* @__PURE__ */ jsxs(ToolbarActions, { children: [
+        /* @__PURE__ */ jsxs(
+          ComponentFilterSelect,
+          {
+            size: "small",
+            value: componentFilter,
+            onChange: (event) => setComponentFilter(event.target.value),
+            children: [
+              /* @__PURE__ */ jsx(MenuItem, { value: ALL_COMPONENTS, children: "All components" }),
+              componentOptions.map((component) => /* @__PURE__ */ jsx(MenuItem, { value: component.id, children: component.name }, component.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(SwitchLabel, { children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              size: "small",
+              checked: hideEqual,
+              onChange: (event) => setHideEqual(event.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Hide identical" })
+        ] })
+      ] })
+    ] }),
+    allEqual ? /* @__PURE__ */ jsx(Alert, { severity: "success", variant: "outlined", children: "These environments are identical." }) : null,
+    /* @__PURE__ */ jsx(
+      DataList,
+      {
+        rows: filteredRows,
+        columns,
+        searchable: true,
+        searchPlaceholder: "Search component or path\u2026",
+        defaultSort: { field: "componentName", direction: "asc" },
+        defaultPageSize: 20,
+        variant: "outlined",
+        size: "small",
+        loading,
+        emptyMessage: hideEqual && allEqual ? "All fields are identical." : 'No fields match the current filters. Try clearing the search, switching the component filter, or toggling "Hide identical".'
+      }
+    )
+  ] });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  flex: 1
+}));
+const HeaderBar = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(2),
+  paddingBottom: theme.spacing(1.5),
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const BackButton = stylin(Button)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  flexShrink: 0
+}));
+const Title = stylin(Box)(({ theme }) => ({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(1.5)
+}));
+const EnvName = stylin("span")(({ theme }) => ({
+  fontSize: theme.typography.h6.fontSize,
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  maxWidth: theme.spacing(40),
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+const ArrowText = stylin("span")(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  fontSize: theme.typography.h6.fontSize
+}));
+const HeaderSpacer = stylin(Box)(({ theme }) => ({
+  width: theme.spacing(20),
+  flexShrink: 0
+}));
+const SummaryRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(2),
+  flexWrap: "wrap"
+}));
+const Strong = stylin("span")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: 600
+}));
+const ToolbarActions = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  flexWrap: "wrap"
+}));
+const ComponentFilterSelect = stylin(Select)(({ theme }) => ({
+  minWidth: theme.spacing(22.5)
+}));
+const SwitchLabel = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  userSelect: "none"
+}));
+
+export { ResultsStep, ResultsStep as default };
+//# sourceMappingURL=ResultsStep.esm.js.map

package/dist/features/environment/CompareEnvironmentsDialog/ResultsStep.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultsStep.esm.js","sources":["../../../../src/features/environment/CompareEnvironmentsDialog/ResultsStep.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport Switch from '@massdriver/ui/Switch';\nimport Select, { MenuItem } from '@massdriver/ui/Select';\nimport Alert from '@massdriver/ui/Alert';\nimport Button from '@massdriver/ui/Button';\nimport DataList from '@massdriver/ui/DataList';\nimport stylin from '@massdriver/ui/stylin';\nimport ChevronLeftIcon from '@massdriver/ui/icons/ChevronLeftIcon';\nimport buildCompareColumns from './compareColumns';\nimport type { ComparisonRow } from './flattenComparison';\n\nconst ALL_COMPONENTS = '__all__';\n\n/** Step 2 of the compare flow: the flattened diff rendered as a DataList. */\nexport const ResultsStep = ({\n  rows,\n  sourceName,\n  targetName,\n  loading,\n  onChangeSelection,\n}: {\n  rows: ComparisonRow[];\n  sourceName?: string;\n  targetName?: string;\n  loading: boolean;\n  onChangeSelection: () => void;\n}) => {\n  const [hideEqual, setHideEqual] = useState(true);\n  const [componentFilter, setComponentFilter] = useState(ALL_COMPONENTS);\n\n  const componentOptions = useMemo(() => {\n    const seen = new Map<string, string>();\n    rows.forEach(row => {\n      if (!seen.has(row.component.id)) {\n        seen.set(row.component.id, row.component.name);\n      }\n    });\n    return Array.from(seen, ([id, name]) => ({ id, name })).sort(\n      (first, second) => first.name.localeCompare(second.name),\n    );\n  }, [rows]);\n\n  const filteredRows = useMemo(\n    () =>\n      rows.filter(row => {\n        if (hideEqual && row.status === 'equal') return false;\n        if (\n          componentFilter !== ALL_COMPONENTS &&\n          row.component.id !== componentFilter\n        ) {\n          return false;\n        }\n        return true;\n      }),\n    [rows, hideEqual, componentFilter],\n  );\n\n  const columns = useMemo(\n    () =>\n      buildCompareColumns({ leftLabel: sourceName, rightLabel: targetName }),\n    [sourceName, targetName],\n  );\n\n  const differingCount = useMemo(\n    () => rows.filter(row => row.status !== 'equal').length,\n    [rows],\n  );\n  const componentCount = useMemo(() => {\n    const seen = new Set<string>();\n    rows.forEach(row => seen.add(row.component.id));\n    return seen.size;\n  }, [rows]);\n  const allEqual = rows.length > 0 && differingCount === 0;\n\n  return (\n    <Root>\n      <HeaderBar>\n        <BackButton\n          variant=\"text\"\n          size=\"small\"\n          startIcon={<ChevronLeftIcon />}\n          onClick={onChangeSelection}\n        >\n          Change selection\n        </BackButton>\n        <Title>\n          <EnvName>{sourceName || 'Environment 1'}</EnvName>\n          <ArrowText>↔</ArrowText>\n          <EnvName>{targetName || 'Environment 2'}</EnvName>\n        </Title>\n        <HeaderSpacer />\n      </HeaderBar>\n\n      <SummaryRow>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {allEqual ? (\n            'No differences.'\n          ) : (\n            <>\n              <Strong>{differingCount}</Strong>{' '}\n              {differingCount === 1 ? 'difference' : 'differences'} across{' '}\n              <Strong>{componentCount}</Strong>{' '}\n              {componentCount === 1 ? 'component' : 'components'}\n            </>\n          )}\n        </Typography>\n        <ToolbarActions>\n          <ComponentFilterSelect\n            size=\"small\"\n            value={componentFilter}\n            onChange={(event: any) => setComponentFilter(event.target.value)}\n          >\n            <MenuItem value={ALL_COMPONENTS}>All components</MenuItem>\n            {componentOptions.map(component => (\n              <MenuItem key={component.id} value={component.id}>\n                {component.name}\n              </MenuItem>\n            ))}\n          </ComponentFilterSelect>\n          <SwitchLabel>\n            <Switch\n              size=\"small\"\n              checked={hideEqual}\n              onChange={(event: any) => setHideEqual(event.target.checked)}\n            />\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              Hide identical\n            </Typography>\n          </SwitchLabel>\n        </ToolbarActions>\n      </SummaryRow>\n\n      {allEqual ? (\n        <Alert severity=\"success\" variant=\"outlined\">\n          These environments are identical.\n        </Alert>\n      ) : null}\n\n      <DataList\n        rows={filteredRows}\n        columns={columns}\n        searchable\n        searchPlaceholder=\"Search component or path…\"\n        defaultSort={{ field: 'componentName', direction: 'asc' }}\n        defaultPageSize={20}\n        variant=\"outlined\"\n        size=\"small\"\n        loading={loading}\n        emptyMessage={\n          hideEqual && allEqual\n            ? 'All fields are identical.'\n            : 'No fields match the current filters. Try clearing the search, switching the component filter, or toggling \"Hide identical\".'\n        }\n      />\n    </Root>\n  );\n};\n\nexport default ResultsStep;\n\nconst Root = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  flex: 1,\n}));\n\nconst HeaderBar = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  paddingBottom: theme.spacing(1.5),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n}));\n\nconst BackButton = stylin(Button)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n  flexShrink: 0,\n}));\n\nconst Title = stylin(Box)(({ theme }: { theme: any }) => ({\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: theme.spacing(1.5),\n}));\n\nconst EnvName = stylin('span')(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.h6.fontSize,\n  fontWeight: 600,\n  color: theme.palette.text.primary,\n  maxWidth: theme.spacing(40),\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n}));\n\nconst ArrowText = stylin('span')(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.disabled,\n  fontSize: theme.typography.h6.fontSize,\n}));\n\nconst HeaderSpacer = stylin(Box)(({ theme }: { theme: any }) => ({\n  width: theme.spacing(20),\n  flexShrink: 0,\n}));\n\nconst SummaryRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(2),\n  flexWrap: 'wrap',\n}));\n\nconst Strong = stylin('span')(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.primary,\n  fontWeight: 600,\n}));\n\nconst ToolbarActions = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  flexWrap: 'wrap',\n}));\n\nconst ComponentFilterSelect = stylin(Select)(({ theme }: { theme: any }) => ({\n  minWidth: theme.spacing(22.5),\n}));\n\nconst SwitchLabel = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  userSelect: 'none',\n}));\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,MAAM,cAAA,GAAiB,SAAA;AAGhB,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAMM;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,IAAI,CAAA;AAC/C,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,cAAc,CAAA;AAErE,EAAA,MAAM,gBAAA,GAAmB,QAAQ,MAAM;AACrC,IAAA,MAAM,IAAA,uBAAW,GAAA,EAAoB;AACrC,IAAA,IAAA,CAAK,QAAQ,CAAA,GAAA,KAAO;AAClB,MAAA,IAAI,CAAC,IAAA,CAAK,GAAA,CAAI,GAAA,CAAI,SAAA,CAAU,EAAE,CAAA,EAAG;AAC/B,QAAA,IAAA,CAAK,IAAI,GAAA,CAAI,SAAA,CAAU,EAAA,EAAI,GAAA,CAAI,UAAU,IAAI,CAAA;AAAA,MAC/C;AAAA,IACF,CAAC,CAAA;AACD,IAAA,OAAO,KAAA,CAAM,IAAA,CAAK,IAAA,EAAM,CAAC,CAAC,EAAA,EAAI,IAAI,CAAA,MAAO,EAAE,EAAA,EAAI,IAAA,EAAK,CAAE,CAAA,CAAE,IAAA;AAAA,MACtD,CAAC,KAAA,EAAO,MAAA,KAAW,MAAM,IAAA,CAAK,aAAA,CAAc,OAAO,IAAI;AAAA,KACzD;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,MACE,IAAA,CAAK,MAAA,CAAO,CAAA,GAAA,KAAO;AACjB,MAAA,IAAI,SAAA,IAAa,GAAA,CAAI,MAAA,KAAW,OAAA,EAAS,OAAO,KAAA;AAChD,MAAA,IACE,eAAA,KAAoB,cAAA,IACpB,GAAA,CAAI,SAAA,CAAU,OAAO,eAAA,EACrB;AACA,QAAA,OAAO,KAAA;AAAA,MACT;AACA,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,IACH,CAAC,IAAA,EAAM,SAAA,EAAW,eAAe;AAAA,GACnC;AAEA,EAAA,MAAM,OAAA,GAAU,OAAA;AAAA,IACd,MACE,mBAAA,CAAoB,EAAE,WAAW,UAAA,EAAY,UAAA,EAAY,YAAY,CAAA;AAAA,IACvE,CAAC,YAAY,UAAU;AAAA,GACzB;AAEA,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAM,IAAA,CAAK,MAAA,CAAO,SAAO,GAAA,CAAI,MAAA,KAAW,OAAO,CAAA,CAAE,MAAA;AAAA,IACjD,CAAC,IAAI;AAAA,GACP;AACA,EAAA,MAAM,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAA,MAAM,IAAA,uBAAW,GAAA,EAAY;AAC7B,IAAA,IAAA,CAAK,QAAQ,CAAA,GAAA,KAAO,IAAA,CAAK,IAAI,GAAA,CAAI,SAAA,CAAU,EAAE,CAAC,CAAA;AAC9C,IAAA,OAAO,IAAA,CAAK,IAAA;AAAA,EACd,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AACT,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK,cAAA,KAAmB,CAAA;AAEvD,EAAA,4BACG,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,MAAA;AAAA,UACR,IAAA,EAAK,OAAA;AAAA,UACL,SAAA,sBAAY,eAAA,EAAA,EAAgB,CAAA;AAAA,UAC5B,OAAA,EAAS,iBAAA;AAAA,UACV,QAAA,EAAA;AAAA;AAAA,OAED;AAAA,2BACC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAA,EAAA,EAAS,wBAAc,eAAA,EAAgB,CAAA;AAAA,wBACxC,GAAA,CAAC,aAAU,QAAA,EAAA,QAAA,EAAC,CAAA;AAAA,wBACZ,GAAA,CAAC,OAAA,EAAA,EAAS,QAAA,EAAA,UAAA,IAAc,eAAA,EAAgB;AAAA,OAAA,EAC1C,CAAA;AAAA,0BACC,YAAA,EAAA,EAAa;AAAA,KAAA,EAChB,CAAA;AAAA,yBAEC,UAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAW,OAAA,EAAQ,OAAA,EAAQ,OAAM,gBAAA,EAC/B,QAAA,EAAA,QAAA,GACC,oCAEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAQ,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,QAAU,GAAA;AAAA,QACjC,cAAA,KAAmB,IAAI,YAAA,GAAe,aAAA;AAAA,QAAc,SAAA;AAAA,QAAQ,GAAA;AAAA,wBAC7D,GAAA,CAAC,UAAQ,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,QAAU,GAAA;AAAA,QACjC,cAAA,KAAmB,IAAI,WAAA,GAAc;AAAA,OAAA,EACxC,CAAA,EAEJ,CAAA;AAAA,2BACC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,KAAA,EAAO,eAAA;AAAA,YACP,UAAU,CAAC,KAAA,KAAe,kBAAA,CAAmB,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,YAE/D,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,cAAA,EAAgB,QAAA,EAAA,gBAAA,EAAc,CAAA;AAAA,cAC9C,gBAAA,CAAiB,GAAA,CAAI,CAAA,SAAA,qBACpB,GAAA,CAAC,QAAA,EAAA,EAA4B,KAAA,EAAO,SAAA,CAAU,EAAA,EAC3C,QAAA,EAAA,SAAA,CAAU,IAAA,EAAA,EADE,SAAA,CAAU,EAEzB,CACD;AAAA;AAAA;AAAA,SACH;AAAA,6BACC,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAS,SAAA;AAAA,cACT,UAAU,CAAC,KAAA,KAAe,YAAA,CAAa,KAAA,CAAM,OAAO,OAAO;AAAA;AAAA,WAC7D;AAAA,8BACC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAM,kBAAiB,QAAA,EAAA,gBAAA,EAEnD;AAAA,SAAA,EACF;AAAA,OAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,IAEC,QAAA,uBACE,KAAA,EAAA,EAAM,QAAA,EAAS,WAAU,OAAA,EAAQ,UAAA,EAAW,+CAE7C,CAAA,GACE,IAAA;AAAA,oBAEJ,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,YAAA;AAAA,QACN,OAAA;AAAA,QACA,UAAA,EAAU,IAAA;AAAA,QACV,iBAAA,EAAkB,gCAAA;AAAA,QAClB,WAAA,EAAa,EAAE,KAAA,EAAO,eAAA,EAAiB,WAAW,KAAA,EAAM;AAAA,QACxD,eAAA,EAAiB,EAAA;AAAA,QACjB,OAAA,EAAQ,UAAA;AAAA,QACR,IAAA,EAAK,OAAA;AAAA,QACL,OAAA;AAAA,QACA,YAAA,EACE,SAAA,IAAa,QAAA,GACT,2BAAA,GACA;AAAA;AAAA;AAER,GAAA,EACF,CAAA;AAEJ;AAIA,MAAM,OAAO,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EACvD,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACpB,IAAA,EAAM;AACR,CAAA,CAAE,CAAA;AAEF,MAAM,YAAY,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC5D,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACpB,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,EAChC,YAAA,EAAc,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,OAAO,CAAA;AAClD,CAAA,CAAE,CAAA;AAEF,MAAM,aAAa,MAAA,CAAO,MAAM,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAChE,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,SAAA;AAAA,EAC1B,UAAA,EAAY;AACd,CAAA,CAAE,CAAA;AAEF,MAAM,QAAQ,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EACxD,IAAA,EAAM,CAAA;AAAA,EACN,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,QAAA;AAAA,EAChB,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AACxB,CAAA,CAAE,CAAA;AAEF,MAAM,UAAU,MAAA,CAAO,MAAM,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC7D,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,EAAA,CAAG,QAAA;AAAA,EAC9B,UAAA,EAAY,GAAA;AAAA,EACZ,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,EAC1B,QAAA,EAAU,KAAA,CAAM,OAAA,CAAQ,EAAE,CAAA;AAAA,EAC1B,UAAA,EAAY,QAAA;AAAA,EACZ,QAAA,EAAU,QAAA;AAAA,EACV,YAAA,EAAc;AAChB,CAAA,CAAE,CAAA;AAEF,MAAM,YAAY,MAAA,CAAO,MAAM,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC/D,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,QAAA;AAAA,EAC1B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,EAAA,CAAG;AAChC,CAAA,CAAE,CAAA;AAEF,MAAM,eAAe,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC/D,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,EAAE,CAAA;AAAA,EACvB,UAAA,EAAY;AACd,CAAA,CAAE,CAAA;AAEF,MAAM,aAAa,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC7D,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,eAAA;AAAA,EAChB,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACpB,QAAA,EAAU;AACZ,CAAA,CAAE,CAAA;AAEF,MAAM,SAAS,MAAA,CAAO,MAAM,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC5D,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,EAC1B,UAAA,EAAY;AACd,CAAA,CAAE,CAAA;AAEF,MAAM,iBAAiB,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EACjE,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,EACtB,QAAA,EAAU;AACZ,CAAA,CAAE,CAAA;AAEF,MAAM,wBAAwB,MAAA,CAAO,MAAM,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC3E,QAAA,EAAU,KAAA,CAAM,OAAA,CAAQ,IAAI;AAC9B,CAAA,CAAE,CAAA;AAEF,MAAM,cAAc,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC9D,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,EACtB,UAAA,EAAY;AACd,CAAA,CAAE,CAAA;;;;"}

package/dist/features/environment/CompareEnvironmentsDialog/SelectStep.esm.js

@@ -0,0 +1,183 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import IconButton from '@massdriver/ui/IconButton';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Button from '@massdriver/ui/Button';
+import Select, { MenuItem } from '@massdriver/ui/Select';
+import stylin from '@massdriver/ui/stylin';
+import CompareArrowsIcon from '@massdriver/ui/icons/CompareArrowsIcon';
+import SwapHorizIcon from '@massdriver/ui/icons/SwapHorizIcon';
+
+const SelectStep = ({
+  source,
+  target,
+  environments,
+  projectName,
+  onSourceChange,
+  onTargetChange,
+  onSwap,
+  onCompare
+}) => {
+  const sameSelected = Boolean(source && target && source.id === target.id);
+  const canCompare = Boolean(source && target && !sameSelected);
+  const canSwap = Boolean(source) && Boolean(target);
+  const findEnv = (id) => environments.find((environment) => environment.id === id) ?? null;
+  return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(Center, { children: [
+    /* @__PURE__ */ jsx(IconBadge, { children: /* @__PURE__ */ jsx(CompareArrowsIcon, {}) }),
+    /* @__PURE__ */ jsxs(Heading, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h2", children: "Compare Environments" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body1", color: "text.secondary", children: [
+        "Pick two environments",
+        projectName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " in ",
+          /* @__PURE__ */ jsx("strong", { children: projectName })
+        ] }) : null,
+        " ",
+        "to see how their components and parameters differ."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(PickerRow, { children: [
+      /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          fullWidth: true,
+          displayEmpty: true,
+          value: source?.id ?? "",
+          onChange: (event) => onSourceChange(findEnv(event.target.value)),
+          renderValue: (value) => value ? findEnv(value)?.name : "Pick an environment\u2026",
+          children: environments.map((environment) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              value: environment.id,
+              disabled: target?.id === environment.id,
+              children: environment.name
+            },
+            environment.id
+          ))
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: canSwap ? "Swap environments" : "Pick both first",
+          arrow: true,
+          children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+            SwapButton,
+            {
+              size: "medium",
+              onClick: onSwap,
+              disabled: !canSwap,
+              "aria-label": "Swap environments",
+              children: /* @__PURE__ */ jsx(SwapHorizIcon, {})
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          fullWidth: true,
+          displayEmpty: true,
+          value: target?.id ?? "",
+          onChange: (event) => onTargetChange(findEnv(event.target.value)),
+          renderValue: (value) => value ? findEnv(value)?.name : "Pick an environment\u2026",
+          children: environments.map((environment) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              value: environment.id,
+              disabled: source?.id === environment.id,
+              children: environment.name
+            },
+            environment.id
+          ))
+        }
+      ) })
+    ] }),
+    sameSelected ? /* @__PURE__ */ jsx(WarnLine, { variant: "caption", children: "Pick two different environments to compare." }) : /* @__PURE__ */ jsx(Spacer, {}),
+    /* @__PURE__ */ jsx(
+      CompareButton,
+      {
+        variant: "contained",
+        size: "large",
+        onClick: onCompare,
+        disabled: !canCompare,
+        children: "Compare"
+      }
+    )
+  ] }) });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: theme.spacing(4)
+}));
+const Center = stylin(Box)(({ theme }) => ({
+  width: "100%",
+  maxWidth: theme.spacing(90),
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(3)
+}));
+const IconBadge = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: theme.spacing(7),
+  height: theme.spacing(7),
+  borderRadius: "50%",
+  backgroundColor: theme.palette.action.selected,
+  color: theme.palette.primary.main,
+  "& > svg": { fontSize: 32 }
+}));
+const Heading = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  textAlign: "center",
+  gap: theme.spacing(1),
+  maxWidth: theme.spacing(75)
+}));
+const PickerRow = stylin(Box)(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  marginTop: theme.spacing(2),
+  [theme.breakpoints.down("sm")]: {
+    flexDirection: "column"
+  }
+}));
+const PickerSlot = stylin(Box)({
+  flex: 1,
+  minWidth: 0,
+  width: "100%"
+});
+const SwapButton = stylin(IconButton)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.paper,
+  flexShrink: 0,
+  "&:hover": {
+    color: theme.palette.primary.main,
+    borderColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.background.paper
+  }
+}));
+const WarnLine = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.warning.main,
+  marginTop: theme.spacing(0.5)
+}));
+const Spacer = stylin(Box)(({ theme }) => ({
+  height: theme.spacing(2)
+}));
+const CompareButton = stylin(Button)(({ theme }) => ({
+  minWidth: theme.spacing(24),
+  marginTop: theme.spacing(1)
+}));
+
+export { SelectStep, SelectStep as default };
+//# sourceMappingURL=SelectStep.esm.js.map

package/dist/features/environment/CompareEnvironmentsDialog/SelectStep.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectStep.esm.js","sources":["../../../../src/features/environment/CompareEnvironmentsDialog/SelectStep.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport IconButton from '@massdriver/ui/IconButton';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Button from '@massdriver/ui/Button';\nimport Select, { MenuItem } from '@massdriver/ui/Select';\nimport stylin from '@massdriver/ui/stylin';\nimport CompareArrowsIcon from '@massdriver/ui/icons/CompareArrowsIcon';\nimport SwapHorizIcon from '@massdriver/ui/icons/SwapHorizIcon';\nimport type { HeaderEnvironment } from '../GraphHeader/queries';\n\n/**\n * Step 1 of the compare flow: pick two environments. Simplified from the web\n * app's infinite-scroll autocompletes to plain Selects — the dialog already has\n * the project's full environment list in memory.\n */\nexport const SelectStep = ({\n  source,\n  target,\n  environments,\n  projectName,\n  onSourceChange,\n  onTargetChange,\n  onSwap,\n  onCompare,\n}: {\n  source: HeaderEnvironment | null;\n  target: HeaderEnvironment | null;\n  environments: HeaderEnvironment[];\n  projectName?: string;\n  onSourceChange: (environment: HeaderEnvironment | null) => void;\n  onTargetChange: (environment: HeaderEnvironment | null) => void;\n  onSwap: () => void;\n  onCompare: () => void;\n}) => {\n  const sameSelected = Boolean(source && target && source.id === target.id);\n  const canCompare = Boolean(source && target && !sameSelected);\n  const canSwap = Boolean(source) && Boolean(target);\n\n  const findEnv = (id: string) =>\n    environments.find(environment => environment.id === id) ?? null;\n\n  return (\n    <Root>\n      <Center>\n        <IconBadge>\n          <CompareArrowsIcon />\n        </IconBadge>\n\n        <Heading>\n          <Typography variant=\"h4\" component=\"h2\">\n            Compare Environments\n          </Typography>\n          <Typography variant=\"body1\" color=\"text.secondary\">\n            Pick two environments\n            {projectName ? (\n              <>\n                {' in '}\n                <strong>{projectName}</strong>\n              </>\n            ) : null}{' '}\n            to see how their components and parameters differ.\n          </Typography>\n        </Heading>\n\n        <PickerRow>\n          <PickerSlot>\n            <Select\n              fullWidth\n              displayEmpty\n              value={source?.id ?? ''}\n              onChange={(event: any) =>\n                onSourceChange(findEnv(event.target.value))\n              }\n              renderValue={(value: string) =>\n                value ? findEnv(value)?.name : 'Pick an environment…'\n              }\n            >\n              {environments.map(environment => (\n                <MenuItem\n                  key={environment.id}\n                  value={environment.id}\n                  disabled={target?.id === environment.id}\n                >\n                  {environment.name}\n                </MenuItem>\n              ))}\n            </Select>\n          </PickerSlot>\n\n          <Tooltip\n            title={canSwap ? 'Swap environments' : 'Pick both first'}\n            arrow\n          >\n            <span>\n              <SwapButton\n                size=\"medium\"\n                onClick={onSwap}\n                disabled={!canSwap}\n                aria-label=\"Swap environments\"\n              >\n                <SwapHorizIcon />\n              </SwapButton>\n            </span>\n          </Tooltip>\n\n          <PickerSlot>\n            <Select\n              fullWidth\n              displayEmpty\n              value={target?.id ?? ''}\n              onChange={(event: any) =>\n                onTargetChange(findEnv(event.target.value))\n              }\n              renderValue={(value: string) =>\n                value ? findEnv(value)?.name : 'Pick an environment…'\n              }\n            >\n              {environments.map(environment => (\n                <MenuItem\n                  key={environment.id}\n                  value={environment.id}\n                  disabled={source?.id === environment.id}\n                >\n                  {environment.name}\n                </MenuItem>\n              ))}\n            </Select>\n          </PickerSlot>\n        </PickerRow>\n\n        {sameSelected ? (\n          <WarnLine variant=\"caption\">\n            Pick two different environments to compare.\n          </WarnLine>\n        ) : (\n          <Spacer />\n        )}\n\n        <CompareButton\n          variant=\"contained\"\n          size=\"large\"\n          onClick={onCompare}\n          disabled={!canCompare}\n        >\n          Compare\n        </CompareButton>\n      </Center>\n    </Root>\n  );\n};\n\nexport default SelectStep;\n\nconst Root = stylin(Box)(({ theme }: { theme: any }) => ({\n  flex: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(4),\n}));\n\nconst Center = stylin(Box)(({ theme }: { theme: any }) => ({\n  width: '100%',\n  maxWidth: theme.spacing(90),\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  gap: theme.spacing(3),\n}));\n\nconst IconBadge = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: theme.spacing(7),\n  height: theme.spacing(7),\n  borderRadius: '50%',\n  backgroundColor: theme.palette.action.selected,\n  color: theme.palette.primary.main,\n  '& > svg': { fontSize: 32 },\n}));\n\nconst Heading = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  textAlign: 'center',\n  gap: theme.spacing(1),\n  maxWidth: theme.spacing(75),\n}));\n\nconst PickerRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  width: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  marginTop: theme.spacing(2),\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n  },\n}));\n\nconst PickerSlot = stylin(Box)({\n  flex: 1,\n  minWidth: 0,\n  width: '100%',\n});\n\nconst SwapButton = stylin(IconButton)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n  border: `1px solid ${theme.palette.divider}`,\n  backgroundColor: theme.palette.background.paper,\n  flexShrink: 0,\n  '&:hover': {\n    color: theme.palette.primary.main,\n    borderColor: theme.palette.primary.main,\n    backgroundColor: theme.palette.background.paper,\n  },\n}));\n\nconst WarnLine = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.warning.main,\n  marginTop: theme.spacing(0.5),\n}));\n\nconst Spacer = stylin(Box)(({ theme }: { theme: any }) => ({\n  height: theme.spacing(2),\n}));\n\nconst CompareButton = stylin(Button)(({ theme }: { theme: any }) => ({\n  minWidth: theme.spacing(24),\n  marginTop: theme.spacing(1),\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/CompareEnvironmentsDialog/compareColumns.esm.js

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import { col } from '@massdriver/ui/DataList';
+import Box from '@massdriver/ui/Box';
+import Chip from '@massdriver/ui/Chip';
+import stylin from '@massdriver/ui/stylin';
+import { ComparisonValueCell } from './ComparisonValueCell.esm.js';
+import { VERSION_PATH } from './flattenComparison.esm.js';
+
+const renderComponentCell = (value) => /* @__PURE__ */ jsx(ComponentName, { children: value || "--" });
+const renderPathCell = (value) => value === VERSION_PATH ? /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: "Version" }) : /* @__PURE__ */ jsx(PathCell, { children: value });
+const renderLeftCell = (_value, row) => /* @__PURE__ */ jsx(
+  ComparisonValueCell,
+  {
+    side: row.source,
+    isDifferent: row.status === "different",
+    isMissing: row.status === "targetOnly"
+  }
+);
+const renderRightCell = (_value, row) => /* @__PURE__ */ jsx(
+  ComparisonValueCell,
+  {
+    side: row.target,
+    isDifferent: row.status === "different",
+    isMissing: row.status === "sourceOnly"
+  }
+);
+const buildCompareColumns = ({
+  leftLabel,
+  rightLabel
+} = {}) => [
+  col.custom("componentName", "Component", renderComponentCell, {
+    flex: 1.5,
+    minWidth: 160,
+    sortable: true,
+    searchable: true
+  }),
+  col.custom("path", "Path", renderPathCell, {
+    flex: 2,
+    minWidth: 180,
+    sortable: true,
+    searchable: true
+  }),
+  col.custom("sourceValue", leftLabel || "Environment 1", renderLeftCell, {
+    flex: 2,
+    minWidth: 160,
+    sortable: true,
+    searchable: true
+  }),
+  col.custom("targetValue", rightLabel || "Environment 2", renderRightCell, {
+    flex: 2,
+    minWidth: 160,
+    sortable: true,
+    searchable: true
+  })
+];
+const ComponentName = stylin(Box)(({ theme }) => ({
+  fontSize: theme.typography.body2.fontSize,
+  color: theme.palette.text.primary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+const PathCell = stylin(Box)(({ theme }) => ({
+  fontFamily: theme.typography.fontFamilyMono,
+  fontSize: theme.typography.caption.fontSize,
+  color: theme.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+
+export { buildCompareColumns, buildCompareColumns as default };
+//# sourceMappingURL=compareColumns.esm.js.map

package/dist/features/environment/CompareEnvironmentsDialog/compareColumns.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compareColumns.esm.js","sources":["../../../../src/features/environment/CompareEnvironmentsDialog/compareColumns.tsx"],"sourcesContent":["import { col } from '@massdriver/ui/DataList';\nimport Box from '@massdriver/ui/Box';\nimport Chip from '@massdriver/ui/Chip';\nimport stylin from '@massdriver/ui/stylin';\nimport ComparisonValueCell from './ComparisonValueCell';\nimport { VERSION_PATH, type ComparisonRow } from './flattenComparison';\n\nconst renderComponentCell = (value: string) => (\n  <ComponentName>{value || '--'}</ComponentName>\n);\n\nconst renderPathCell = (value: string) =>\n  value === VERSION_PATH ? (\n    <Chip size=\"small\" variant=\"outlined\" label=\"Version\" />\n  ) : (\n    <PathCell>{value}</PathCell>\n  );\n\nconst renderLeftCell = (_value: unknown, row: ComparisonRow) => (\n  <ComparisonValueCell\n    side={row.source}\n    isDifferent={row.status === 'different'}\n    isMissing={row.status === 'targetOnly'}\n  />\n);\n\nconst renderRightCell = (_value: unknown, row: ComparisonRow) => (\n  <ComparisonValueCell\n    side={row.target}\n    isDifferent={row.status === 'different'}\n    isMissing={row.status === 'sourceOnly'}\n  />\n);\n\nexport const buildCompareColumns = ({\n  leftLabel,\n  rightLabel,\n}: {\n  leftLabel?: string;\n  rightLabel?: string;\n} = {}) => [\n  col.custom('componentName', 'Component', renderComponentCell, {\n    flex: 1.5,\n    minWidth: 160,\n    sortable: true,\n    searchable: true,\n  }),\n  col.custom('path', 'Path', renderPathCell, {\n    flex: 2,\n    minWidth: 180,\n    sortable: true,\n    searchable: true,\n  }),\n  col.custom('sourceValue', leftLabel || 'Environment 1', renderLeftCell, {\n    flex: 2,\n    minWidth: 160,\n    sortable: true,\n    searchable: true,\n  }),\n  col.custom('targetValue', rightLabel || 'Environment 2', renderRightCell, {\n    flex: 2,\n    minWidth: 160,\n    sortable: true,\n    searchable: true,\n  }),\n];\n\nexport default buildCompareColumns;\n\nconst ComponentName = stylin(Box)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.body2.fontSize,\n  color: theme.palette.text.primary,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n}));\n\nconst PathCell = stylin(Box)(({ theme }: { theme: any }) => ({\n  fontFamily: theme.typography.fontFamilyMono,\n  fontSize: theme.typography.caption.fontSize,\n  color: theme.palette.text.secondary,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n}));\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,sBAAsB,CAAC,KAAA,qBAC3B,GAAA,CAAC,aAAA,EAAA,EAAe,mBAAS,IAAA,EAAK,CAAA;AAGhC,MAAM,iBAAiB,CAAC,KAAA,KACtB,KAAA,KAAU,YAAA,uBACP,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,YAAW,KAAA,EAAM,SAAA,EAAU,CAAA,mBAEtD,GAAA,CAAC,YAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAGrB,MAAM,cAAA,GAAiB,CAAC,MAAA,EAAiB,GAAA,qBACvC,GAAA;AAAA,EAAC,mBAAA;AAAA,EAAA;AAAA,IACC,MAAM,GAAA,CAAI,MAAA;AAAA,IACV,WAAA,EAAa,IAAI,MAAA,KAAW,WAAA;AAAA,IAC5B,SAAA,EAAW,IAAI,MAAA,KAAW;AAAA;AAC5B,CAAA;AAGF,MAAM,eAAA,GAAkB,CAAC,MAAA,EAAiB,GAAA,qBACxC,GAAA;AAAA,EAAC,mBAAA;AAAA,EAAA;AAAA,IACC,MAAM,GAAA,CAAI,MAAA;AAAA,IACV,WAAA,EAAa,IAAI,MAAA,KAAW,WAAA;AAAA,IAC5B,SAAA,EAAW,IAAI,MAAA,KAAW;AAAA;AAC5B,CAAA;AAGK,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA;AACF,CAAA,GAGI,EAAC,KAAM;AAAA,EACT,GAAA,CAAI,MAAA,CAAO,eAAA,EAAiB,WAAA,EAAa,mBAAA,EAAqB;AAAA,IAC5D,IAAA,EAAM,GAAA;AAAA,IACN,QAAA,EAAU,GAAA;AAAA,IACV,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,GAAA,CAAI,MAAA,CAAO,MAAA,EAAQ,MAAA,EAAQ,cAAA,EAAgB;AAAA,IACzC,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,GAAA;AAAA,IACV,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,GAAA,CAAI,MAAA,CAAO,aAAA,EAAe,SAAA,IAAa,iBAAiB,cAAA,EAAgB;AAAA,IACtE,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,GAAA;AAAA,IACV,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,GAAA,CAAI,MAAA,CAAO,aAAA,EAAe,UAAA,IAAc,iBAAiB,eAAA,EAAiB;AAAA,IACxE,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,GAAA;AAAA,IACV,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb;AACH;AAIA,MAAM,gBAAgB,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAChE,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,EACjC,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,EAC1B,UAAA,EAAY,QAAA;AAAA,EACZ,QAAA,EAAU,QAAA;AAAA,EACV,YAAA,EAAc;AAChB,CAAA,CAAE,CAAA;AAEF,MAAM,WAAW,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC3D,UAAA,EAAY,MAAM,UAAA,CAAW,cAAA;AAAA,EAC7B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,OAAA,CAAQ,QAAA;AAAA,EACnC,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,SAAA;AAAA,EAC1B,UAAA,EAAY,QAAA;AAAA,EACZ,QAAA,EAAU,QAAA;AAAA,EACV,YAAA,EAAc;AAChB,CAAA,CAAE,CAAA;;;;"}