@oxy.so/bloom 3.6.0 → 4.0.0

package/lib/module/pipeline/DealCard.js

@@ -0,0 +1,212 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { Avatar } from "../avatar/index.js";
+import { Badge } from "../badge/index.js";
+import { GlyphButton } from '../button';
+import { Card } from "../card/index.js";
+import { RiArrowLeftRightLine } from "../icons/remix/RiArrowLeftRightLine.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { SurfaceLevelProvider, surfaceFillVars } from "../styles/surface-levels.js";
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { DEAL_CARD_PADDING, DEAL_HEALTH } from "./constants.js";
+import { PIPELINE_STYLE_ID, PIPELINE_WEB_CSS, dealHealthLabel, dealHealthTone, joinDealName, resolvePipelinePaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One deal, as it appears in a column.
+ *
+ *   header   the title (2 lines max) with the move action and the `actions` slot
+ *            beside it
+ *   account  the company, quiet, one line
+ *   figures  the AMOUNT on the left and the close date on the right, both one
+ *            line and neither allowed to wrap — an amount broken across two
+ *            lines is a different number to a reader
+ *   footer   the health signal, and the owner's avatar
+ *
+ * **The amount is a STRING the app formats.** Currency, locale, rounding and
+ * abbreviation are four decisions the card cannot make, and a card that guessed
+ * one of them would be wrong in a way nobody notices until a customer does.
+ *
+ * **The press target is the title block, not the card.** The move action and the
+ * `actions` slot are controls, and a control inside a control is invalid on web
+ * and ambiguous everywhere else — so `onPress` is bound to the text, which is
+ * still the largest target on the card.
+ */
+function DealCardComponent({
+  title,
+  account,
+  amount,
+  closeDate,
+  owner,
+  stage,
+  health,
+  healthLabel,
+  stalledFor,
+  onPress,
+  onMove,
+  moveLabel,
+  actions,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolvePipelinePaint(theme, theme.colors.card), [theme]);
+  useEffect(() => {
+    adoptStyleSheet(PIPELINE_STYLE_ID, PIPELINE_WEB_CSS);
+  }, []);
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const signal = dealHealthLabel({
+    health,
+    healthLabel,
+    stalledFor
+  });
+  const HealthIcon = health === undefined ? undefined : DEAL_HEALTH[health].icon;
+  const titleBlock = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      gap: 2
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "body-semibold",
+      numberOfLines: 2,
+      style: {
+        color: paint.text
+      },
+      testID: id('title'),
+      children: title
+    }), account ? /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      numberOfLines: 1,
+      style: {
+        color: paint.textSecondary
+      },
+      testID: id('account'),
+      children: account
+    }) : null]
+  });
+  const ringVars = {
+    '--bloom-deal-ring': paint.ring
+  };
+  const subject = onPress ? /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel ?? joinDealName([title, account, amount]),
+    onPress: onPress,
+    ...webDataSet({
+      bloomDealSubject: ''
+    }),
+    style: ({
+      pressed
+    }) => [{
+      flex: 1,
+      minWidth: 0,
+      borderRadius: 8,
+      ...ringVars
+    }, pressed ? {
+      opacity: 0.7
+    } : null],
+    testID: id('subject'),
+    children: titleBlock
+  }) : titleBlock;
+  return /*#__PURE__*/_jsx(SurfaceLevelProvider, {
+    level: 2,
+    fill: paint.surface,
+    children: /*#__PURE__*/_jsxs(Card, {
+      variant: "outlined",
+      radius: "radius-12",
+      style: [{
+        padding: DEAL_CARD_PADDING,
+        gap: 8,
+        ...surfaceFillVars(paint.surface)
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: 4
+        },
+        children: [subject, onMove ? /*#__PURE__*/_jsx(GlyphButton, {
+          icon: RiArrowLeftRightLine,
+          size: 32,
+          glyphSize: 18,
+          onPress: onMove,
+          hoverFill: paint.raised,
+          ring: paint.ring,
+          accessibilityLabel: moveLabel ?? `Move ${title}`,
+          testID: id('move')
+        }) : null, actions ? /*#__PURE__*/_jsx(View, {
+          style: {
+            flexShrink: 0
+          },
+          testID: id('actions'),
+          children: actions
+        }) : null]
+      }), amount || closeDate ? /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'baseline',
+          justifyContent: 'space-between',
+          gap: 8
+        },
+        children: [amount ? /*#__PURE__*/_jsx(Text, {
+          variant: "headline-semibold",
+          numberOfLines: 1,
+          style: {
+            color: paint.text,
+            flexShrink: 0
+          },
+          testID: id('amount'),
+          children: amount
+        }) : /*#__PURE__*/_jsx(View, {}), closeDate ? /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: paint.textTertiary,
+            flexShrink: 1,
+            textAlign: 'right'
+          },
+          testID: id('close-date'),
+          children: closeDate
+        }) : null]
+      }) : null, signal || stage || owner ? /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6
+        },
+        children: [signal ? /*#__PURE__*/_jsx(Badge, {
+          content: signal,
+          icon: HealthIcon,
+          variant: "subtle",
+          color: dealHealthTone(health),
+          size: "label-small",
+          testID: id('health')
+        }) : null, stage ? /*#__PURE__*/_jsx(Badge, {
+          content: stage,
+          variant: "outlined",
+          color: "default",
+          size: "label-small",
+          testID: id('stage')
+        }) : null, /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1
+          }
+        }), owner ? /*#__PURE__*/_jsx(Avatar, {
+          size: 24,
+          source: owner.avatar,
+          name: owner.name,
+          alt: owner.name,
+          testID: id('owner')
+        }) : null]
+      }) : null]
+    })
+  });
+}
+export const DealCard = /*#__PURE__*/memo(DealCardComponent);
+DealCard.displayName = 'DealCard';
+//# sourceMappingURL=DealCard.js.map

package/lib/module/pipeline/DealCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","Pressable","View","Avatar","Badge","GlyphButton","Card","RiArrowLeftRightLine","adoptStyleSheet","SurfaceLevelProvider","surfaceFillVars","webDataSet","useTheme","Text","DEAL_CARD_PADDING","DEAL_HEALTH","PIPELINE_STYLE_ID","PIPELINE_WEB_CSS","dealHealthLabel","dealHealthTone","joinDealName","resolvePipelinePaint","jsx","_jsx","jsxs","_jsxs","DealCardComponent","title","account","amount","closeDate","owner","stage","health","healthLabel","stalledFor","onPress","onMove","moveLabel","actions","accessibilityLabel","style","testID","theme","paint","colors","card","id","part","undefined","signal","HealthIcon","icon","titleBlock","flex","minWidth","gap","children","variant","numberOfLines","color","text","textSecondary","ringVars","ring","subject","accessibilityRole","bloomDealSubject","pressed","borderRadius","opacity","level","fill","surface","radius","padding","flexDirection","alignItems","size","glyphSize","hoverFill","raised","flexShrink","justifyContent","textTertiary","textAlign","content","source","avatar","name","alt","DealCard","displayName"],"sourceRoot":"../../../src","sources":["pipeline/DealCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/pipeline/PipelineBoard.js

@@ -0,0 +1,144 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { ScrollView, View } from 'react-native';
+import { Chip, ChipRow } from "../chip/index.js";
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { useContainerWidth } from "../hooks/use-container-width.js";
+import { PipelineColumn } from "./PipelineColumn.js";
+import { PIPELINE_COLUMN_WIDTH, PIPELINE_SINGLE_MAX_WIDTH } from "./constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The stages side by side, or one at a time.
+ *
+ *   board    a horizontal scroller of fixed-width columns, 12 apart. The
+ *            scroller is the board's own, so the page behind it does not move
+ *            sideways when a column overflows.
+ *   single   a scrolling TAB ROW of stage names and the selected column at full
+ *            width. This is the phone layout: five stage names do not fit a
+ *            `SegmentedControl` at 390, and a segmented control that clips is
+ *            worse than a row that admits it scrolls.
+ *   auto     measures ITSELF and picks — so a board in a side panel behaves
+ *            like a phone without asking the window how wide it is.
+ *
+ * **THERE IS NO DRAG AND DROP, deliberately.** Moving a deal between stages is
+ * the app's transaction — it has the optimistic update, the rollback, the
+ * permission check and the undo — and a half-built drag (one that reorders the
+ * view and forgets to tell the server, or that fights a horizontal scroller on
+ * a touch screen) is worse than none. What the board exposes instead is the
+ * AFFORDANCE: `DealCard`'s `onMove`, plus its `actions` slot for a menu. See
+ * `docs/pipeline.mdx`.
+ *
+ * The board never inspects what `renderStage` returns, and never reads a child's
+ * type to decide anything: the stage list is data, the cards are opaque.
+ */
+function resolveLayout(layout, width, singleMaxWidth) {
+  if (layout !== 'auto') return layout;
+  // Before the first layout the width is unknown. `board` is the honest default:
+  // it scrolls, so it is merely cramped at a phone width, while `single` on a
+  // desktop would hide four columns behind a tab row nobody asked for.
+  if (width === null) return 'board';
+  return width <= singleMaxWidth ? 'single' : 'board';
+}
+function PipelineBoardComponent({
+  stages,
+  renderStage,
+  layout = 'auto',
+  stageId,
+  defaultStageId,
+  onStageChange,
+  columnWidth = PIPELINE_COLUMN_WIDTH,
+  singleMaxWidth = PIPELINE_SINGLE_MAX_WIDTH,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const {
+    width,
+    onLayout
+  } = useContainerWidth();
+  const [selectedId, setSelectedId] = useControllableState({
+    value: stageId,
+    defaultValue: defaultStageId ?? stages[0]?.id,
+    onChange: next => {
+      if (next !== undefined) onStageChange?.(next);
+    }
+  });
+  const resolved = resolveLayout(layout, width, singleMaxWidth);
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const column = (stage, fixedWidth) => /*#__PURE__*/_jsx(PipelineColumn, {
+    name: stage.name,
+    count: stage.count,
+    total: stage.total,
+    tone: stage.tone,
+    emptyLabel: stage.emptyLabel,
+    loading: stage.loading,
+    onLoadMore: stage.onLoadMore,
+    loadMoreLabel: stage.loadMoreLabel,
+    width: fixedWidth,
+    testID: id(`column-${stage.id}`),
+    children: renderStage(stage)
+  }, stage.id);
+  if (resolved === 'single') {
+    const current = stages.find(stage => stage.id === selectedId) ?? stages[0];
+    return /*#__PURE__*/_jsxs(View, {
+      onLayout: onLayout,
+      style: [{
+        minWidth: 0
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(ChipRow, {
+        role: "tablist",
+        accessibilityLabel: accessibilityLabel ?? 'Pipeline stages',
+        gap: 6,
+        style: {
+          minWidth: 0
+        },
+        testID: id('tabs'),
+        children: stages.map(stage => /*#__PURE__*/_jsx(Chip, {
+          role: "tab",
+          size: "xl",
+          selected: stage.id === current?.id,
+          onPress: () => setSelectedId(stage.id),
+          accessibilityLabel: stage.count === undefined ? stage.name : `${stage.name}, ${stage.count} deals`,
+          testID: id(`tab-${stage.id}`),
+          children: stage.name
+        }, stage.id))
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          marginTop: 12
+        },
+        children: current ? column(current, undefined) : null
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    onLayout: onLayout,
+    style: [{
+      minWidth: 0
+    }, style],
+    testID: testID,
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      accessibilityLabel: accessibilityLabel
+      // `minWidth: 0` is what makes this SCROLL rather than stretch. A flex
+      // item's automatic minimum is its content width, so without it five
+      // 288 columns widen the board, then the page, then the document — the
+      // whole screen scrolls sideways and the board never does.
+      ,
+      style: {
+        minWidth: 0
+      },
+      contentContainerStyle: {
+        gap: 12,
+        alignItems: 'flex-start'
+      },
+      testID: id('scroller'),
+      children: stages.map(stage => column(stage, columnWidth))
+    })
+  });
+}
+export const PipelineBoard = /*#__PURE__*/memo(PipelineBoardComponent);
+PipelineBoard.displayName = 'PipelineBoard';
+//# sourceMappingURL=PipelineBoard.js.map

package/lib/module/pipeline/PipelineBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","ScrollView","View","Chip","ChipRow","useControllableState","useContainerWidth","PipelineColumn","PIPELINE_COLUMN_WIDTH","PIPELINE_SINGLE_MAX_WIDTH","jsx","_jsx","jsxs","_jsxs","resolveLayout","layout","width","singleMaxWidth","PipelineBoardComponent","stages","renderStage","stageId","defaultStageId","onStageChange","columnWidth","accessibilityLabel","style","testID","onLayout","selectedId","setSelectedId","value","defaultValue","id","onChange","next","undefined","resolved","part","column","stage","fixedWidth","name","count","total","tone","emptyLabel","loading","onLoadMore","loadMoreLabel","children","current","find","minWidth","role","gap","map","size","selected","onPress","marginTop","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","alignItems","PipelineBoard","displayName"],"sourceRoot":"../../../src","sources":["pipeline/PipelineBoard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/pipeline/PipelineColumn.js

@@ -0,0 +1,160 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { Badge } from "../badge/index.js";
+import { Button } from '../button';
+import * as Skeleton from "../skeleton/index.js";
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from "../styles/surface-levels.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { PIPELINE_CARD_GAP, PIPELINE_COLUMN_PADDING, PIPELINE_SKELETON_CARDS } from "./constants.js";
+import { pipelineColumnFill, resolvePipelinePaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ONE STAGE: its name, how many deals are in it, what they add up to, and the
+ * cards themselves.
+ *
+ *   header   a 8 dot in the stage's tone, the name, the count as a counter
+ *            badge, and the TOTAL right-aligned on one line — an amount that
+ *            wraps mid-number is a different number to a reader
+ *   rule     a hairline under the header, read off the column's own fill
+ *   body     the cards at 8 apart, or the empty state, or the placeholders
+ *   footer   the "load more" action, when the app has more to give
+ *
+ * The column paints ONE STEP off whatever is behind it (`surfaceFillOn`) and
+ * publishes that fill, so the cards inside step off the column rather than off
+ * the page — the same column reads on a page, in a panel and in a dialog.
+ *
+ * The TOTAL is a string the app supplies, for the reason `DealCard`'s amount is.
+ */
+function PipelineColumnComponent({
+  name,
+  count,
+  total,
+  tone = 'primary',
+  emptyLabel = 'No deals in this stage',
+  loading = false,
+  onLoadMore,
+  loadMoreLabel = 'Load more',
+  children,
+  width,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const behind = useSurfaceFill();
+  const fill = useMemo(() => pipelineColumnFill(theme, behind), [theme, behind]);
+  const paint = useMemo(() => resolvePipelinePaint(theme, fill), [theme, fill]);
+  const dot = resolveAccentColors(theme.colors, tone, 'solid').background;
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const hasCards = React.Children.count(children) > 0;
+  return /*#__PURE__*/_jsx(SurfaceLevelProvider, {
+    level: 1,
+    fill: paint.surface,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [{
+        width,
+        backgroundColor: paint.surface,
+        borderRadius: 16,
+        padding: PIPELINE_COLUMN_PADDING,
+        gap: PIPELINE_CARD_GAP,
+        ...surfaceFillVars(paint.surface)
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          paddingBottom: PIPELINE_CARD_GAP,
+          borderBottomWidth: 1,
+          borderBottomColor: paint.hairline
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: dot
+          },
+          testID: id('dot')
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "body-semibold",
+          numberOfLines: 1,
+          style: {
+            color: paint.text,
+            flexShrink: 1
+          },
+          testID: id('name'),
+          children: name
+        }), count === undefined ? null : /*#__PURE__*/_jsx(Badge, {
+          content: count,
+          variant: "subtle",
+          color: "default",
+          size: "medium",
+          testID: id('count')
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1
+          }
+        }), total ? /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-medium",
+          numberOfLines: 1,
+          style: {
+            color: paint.textSecondary,
+            flexShrink: 0
+          },
+          testID: id('total'),
+          children: total
+        }) : null]
+      }), loading ? /*#__PURE__*/_jsx(View, {
+        style: {
+          gap: PIPELINE_CARD_GAP
+        },
+        testID: id('loading'),
+        children: Array.from({
+          length: PIPELINE_SKELETON_CARDS
+        }, (_, index) => /*#__PURE__*/_jsx(Skeleton.Box, {
+          height: 92,
+          borderRadius: 12
+        }, index))
+      }) : hasCards ? /*#__PURE__*/_jsx(View, {
+        style: {
+          gap: PIPELINE_CARD_GAP
+        },
+        children: children
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          paddingTop: 20,
+          paddingBottom: 20,
+          paddingLeft: 12,
+          paddingRight: 12,
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: paint.hairline,
+          alignItems: 'center'
+        },
+        testID: id('empty'),
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-regular",
+          style: {
+            color: paint.textTertiary,
+            textAlign: 'center'
+          },
+          children: emptyLabel
+        })
+      }), onLoadMore && !loading ? /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        size: "small",
+        onPress: onLoadMore,
+        testID: id('load-more'),
+        children: loadMoreLabel
+      }) : null]
+    })
+  });
+}
+export const PipelineColumn = /*#__PURE__*/memo(PipelineColumnComponent);
+PipelineColumn.displayName = 'PipelineColumn';
+//# sourceMappingURL=PipelineColumn.js.map

package/lib/module/pipeline/PipelineColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","Badge","Button","Skeleton","SurfaceLevelProvider","surfaceFillVars","useSurfaceFill","resolveAccentColors","useTheme","Text","PIPELINE_CARD_GAP","PIPELINE_COLUMN_PADDING","PIPELINE_SKELETON_CARDS","pipelineColumnFill","resolvePipelinePaint","jsx","_jsx","jsxs","_jsxs","PipelineColumnComponent","name","count","total","tone","emptyLabel","loading","onLoadMore","loadMoreLabel","children","width","style","testID","theme","behind","fill","paint","dot","colors","background","id","part","undefined","hasCards","Children","level","surface","backgroundColor","borderRadius","padding","gap","flexDirection","alignItems","paddingBottom","borderBottomWidth","borderBottomColor","hairline","height","variant","numberOfLines","color","text","flexShrink","content","size","flex","textSecondary","Array","from","length","_","index","Box","paddingTop","paddingLeft","paddingRight","borderWidth","borderColor","textTertiary","textAlign","onPress","PipelineColumn","displayName"],"sourceRoot":"../../../src","sources":["pipeline/PipelineColumn.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/pipeline/constants.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import { RiAlarmWarningLine } from "../icons/remix/RiAlarmWarningLine.js";
+import { RiCheckboxCircleLine } from "../icons/remix/RiCheckboxCircleLine.js";
+import { RiTimeLine } from "../icons/remix/RiTimeLine.js";
+/**
+ * The one health signal, as a tone, a word and a glyph.
+ *
+ * A tone rather than a colour: `resolveAccentColors` owns what "warning" looks
+ * like on the surface the card lands on, in both modes and in all 64 presets,
+ * and a card that picked a red would be wrong in half of them.
+ */
+export const DEAL_HEALTH = {
+  'on-track': {
+    tone: 'success',
+    label: 'On track',
+    icon: RiCheckboxCircleLine
+  },
+  'at-risk': {
+    tone: 'warning',
+    label: 'At risk',
+    icon: RiAlarmWarningLine
+  },
+  stalled: {
+    tone: 'error',
+    label: 'Stalled',
+    icon: RiTimeLine
+  }
+};
+
+/** Card geometry. */
+export const DEAL_CARD_PADDING = 12;
+
+/** Column geometry: the pad inside a column, and the gap between its cards. */
+export const PIPELINE_COLUMN_PADDING = 12;
+export const PIPELINE_CARD_GAP = 8;
+
+/**
+ * A column is 288 wide on a board — wide enough for an amount and a close date
+ * on one line at the card's type ramp, narrow enough that three fit a 960 pane.
+ */
+export const PIPELINE_COLUMN_WIDTH = 288;
+
+/**
+ * At or below 700 the board draws ONE column at a time. Measured on the column:
+ * two 288 columns plus the 12 gap and the board's own gutters need 620, and a
+ * board that shows one and a half columns reads as broken rather than as
+ * scrollable.
+ */
+export const PIPELINE_SINGLE_MAX_WIDTH = 700;
+
+/** Placeholder cards drawn while a column is loading. */
+export const PIPELINE_SKELETON_CARDS = 3;
+//# sourceMappingURL=constants.js.map

package/lib/module/pipeline/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RiAlarmWarningLine","RiCheckboxCircleLine","RiTimeLine","DEAL_HEALTH","tone","label","icon","stalled","DEAL_CARD_PADDING","PIPELINE_COLUMN_PADDING","PIPELINE_CARD_GAP","PIPELINE_COLUMN_WIDTH","PIPELINE_SINGLE_MAX_WIDTH","PIPELINE_SKELETON_CARDS"],"sourceRoot":"../../../src","sources":["pipeline/constants.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,sCAAmC;AACtE,SAASC,oBAAoB,QAAQ,wCAAqC;AAC1E,SAASC,UAAU,QAAQ,8BAA2B;AAKtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAGZ,GAAG;EACF,UAAU,EAAE;IAAEC,IAAI,EAAE,SAAS;IAAEC,KAAK,EAAE,UAAU;IAAEC,IAAI,EAAEL;EAAqB,CAAC;EAC9E,SAAS,EAAE;IAAEG,IAAI,EAAE,SAAS;IAAEC,KAAK,EAAE,SAAS;IAAEC,IAAI,EAAEN;EAAmB,CAAC;EAC1EO,OAAO,EAAE;IAAEH,IAAI,EAAE,OAAO;IAAEC,KAAK,EAAE,SAAS;IAAEC,IAAI,EAAEJ;EAAW;AAC/D,CAAC;;AAED;AACA,OAAO,MAAMM,iBAAiB,GAAG,EAAE;;AAEnC;AACA,OAAO,MAAMC,uBAAuB,GAAG,EAAE;AACzC,OAAO,MAAMC,iBAAiB,GAAG,CAAC;;AAElC;AACA;AACA;AACA;AACA,OAAO,MAAMC,qBAAqB,GAAG,GAAG;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,yBAAyB,GAAG,GAAG;;AAE5C;AACA,OAAO,MAAMC,uBAAuB,GAAG,CAAC","ignoreList":[]}

package/lib/module/pipeline/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export { DealCard } from "./DealCard.js";
+export { PipelineBoard } from "./PipelineBoard.js";
+export { PipelineColumn } from "./PipelineColumn.js";
+export { DEAL_CARD_PADDING, DEAL_HEALTH, PIPELINE_CARD_GAP, PIPELINE_COLUMN_PADDING, PIPELINE_COLUMN_WIDTH, PIPELINE_SINGLE_MAX_WIDTH, PIPELINE_SKELETON_CARDS } from "./constants.js";
+export { dealHealthLabel, dealHealthTone, pipelineColumnFill, resolvePipelinePaint } from "./shared.js";
+//# sourceMappingURL=index.js.map

package/lib/module/pipeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DealCard","PipelineBoard","PipelineColumn","DEAL_CARD_PADDING","DEAL_HEALTH","PIPELINE_CARD_GAP","PIPELINE_COLUMN_PADDING","PIPELINE_COLUMN_WIDTH","PIPELINE_SINGLE_MAX_WIDTH","PIPELINE_SKELETON_CARDS","dealHealthLabel","dealHealthTone","pipelineColumnFill","resolvePipelinePaint"],"sourceRoot":"../../../src","sources":["pipeline/index.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,eAAY;AACrC,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,cAAc,QAAQ,qBAAkB;AACjD,SACEC,iBAAiB,EACjBC,WAAW,EACXC,iBAAiB,EACjBC,uBAAuB,EACvBC,qBAAqB,EACrBC,yBAAyB,EACzBC,uBAAuB,QAClB,gBAAa;AACpB,SACEC,eAAe,EACfC,cAAc,EACdC,kBAAkB,EAClBC,oBAAoB,QACf,aAAU","ignoreList":[]}