@remit/ui 0.0.52 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "type": "module",
   "files": [
     "src"

package/src/components/label-chip.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { labelColorOptions } from "../lib/label-color.js";
+import { LabelChip } from "./label-chip.js";
+
+const meta: Meta<typeof LabelChip> = {
+	title: "Primitives/LabelChip",
+	component: LabelChip,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof LabelChip>;
+
+/** A chip in each color the picker offers — the dot is the only thing that varies. */
+export const AllColors: Story = {
+	render: () => (
+		<div className="flex flex-wrap gap-2">
+			{labelColorOptions.map((color) => (
+				<LabelChip
+					key={color}
+					label={{ labelId: `lbl-${color}`, name: color, color }}
+				/>
+			))}
+		</div>
+	),
+};
+
+/** Same colors against the dark theme, so the dot keeps contrast either way. */
+export const AllColorsDark: Story = {
+	name: "All Colors (dark)",
+	parameters: { theme: "dark" },
+	render: () => (
+		<div className="flex flex-wrap gap-2">
+			{labelColorOptions.map((color) => (
+				<LabelChip
+					key={color}
+					label={{ labelId: `lbl-${color}`, name: color, color }}
+				/>
+			))}
+		</div>
+	),
+};
+
+/** A long name truncates rather than growing the chip. */
+export const LongName: Story = {
+	args: {
+		label: {
+			labelId: "lbl-long",
+			name: "Quarterly compliance filings that need a second look",
+			color: "Purple",
+		},
+		className: "max-w-40",
+	},
+};
+
+/** The removable variant — the manual "just these" unlabel action. */
+export const Removable: Story = {
+	args: {
+		label: { labelId: "lbl-receipts", name: "Receipts", color: "Blue" },
+		onRemove: () => undefined,
+	},
+};
+
+/** Removable, on the dark theme. */
+export const RemovableDark: Story = {
+	name: "Removable (dark)",
+	parameters: { theme: "dark" },
+	args: {
+		label: { labelId: "lbl-receipts", name: "Receipts", color: "Blue" },
+		onRemove: () => undefined,
+	},
+};

package/src/components/message-row.stories.tsx

@@ -73,6 +73,81 @@ const withCategory: ThreadRowData = {
 	category: "newsletter",
 };
 
+const noLabel: ThreadRowData = {
+	id: "r-no-label",
+	accountId: "a1",
+	fromName: "Jordan Lee",
+	fromEmail: "jordan@example.com",
+	subject: "Lunch on Friday?",
+	snippet: "Thinking the usual place, around noon.",
+	timeLabel: "10:03",
+	isRead: true,
+};
+
+const oneLabel: ThreadRowData = {
+	id: "r-one-label",
+	accountId: "a1",
+	fromName: "Stripe",
+	fromEmail: "receipts@stripe.com",
+	subject: "Your receipt from Acme Co",
+	snippet: "Payment of $42.00 was successful.",
+	timeLabel: "9:10",
+	isRead: true,
+	labels: [{ labelId: "l1", name: "Receipts", color: "Blue" }],
+};
+
+const twoLabels: ThreadRowData = {
+	id: "r-two-labels",
+	accountId: "a1",
+	fromName: "United Airlines",
+	fromEmail: "noreply@united.com",
+	subject: "Your itinerary for SFO → JFK",
+	snippet: "Check-in opens 24 hours before departure.",
+	timeLabel: "Yesterday",
+	isRead: false,
+	labels: [
+		{ labelId: "l1", name: "Receipts", color: "Blue" },
+		{ labelId: "l2", name: "Travel", color: "Green" },
+	],
+};
+
+const severalLabels: ThreadRowData = {
+	id: "r-several-labels",
+	accountId: "a1",
+	fromName: "Finance Team",
+	fromEmail: "finance@example.com",
+	subject: "Q3 budget review — action needed",
+	snippet: "Please review the attached numbers before Thursday.",
+	timeLabel: "Mon",
+	isRead: false,
+	labels: [
+		{ labelId: "l1", name: "Receipts", color: "Blue" },
+		{ labelId: "l2", name: "Travel", color: "Green" },
+		{ labelId: "l3", name: "Urgent", color: "Red" },
+		{ labelId: "l4", name: "Work", color: "Purple" },
+	],
+};
+
+const longLabelName: ThreadRowData = {
+	id: "r-long-label",
+	accountId: "a1",
+	fromName: "Compliance",
+	fromEmail: "compliance@example.com",
+	subject: "Filing due end of quarter",
+	snippet: "One outstanding item on the checklist.",
+	timeLabel: "Tue",
+	isRead: true,
+	labels: [
+		{
+			labelId: "l5",
+			name: "Quarterly compliance filings that need a second look",
+			color: "Purple",
+		},
+	],
+};
+
+const labeled = [noLabel, oneLabel, twoLabels, severalLabels, longLabelName];
+
 const all = [read, unread, starred, suspicious, withAttachment, withCategory];
 
 const meta: Meta = {
@@ -149,3 +224,60 @@ export const Selectable: Story = {
 		</List>
 	),
 };
+
+/**
+ * Labels (issue #26) alongside the existing read/unread, attachment and
+ * category affordances — no label, one, two, several, and a long name that
+ * truncates rather than growing the row. Comfortable density renders the
+ * chips; compact does not (see `CompactLabels` below).
+ */
+export const ComfortableLabels: Story = {
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<ComfortableRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+/** The same labeled threads on the dark theme. */
+export const ComfortableLabelsDark: Story = {
+	name: "Comfortable Labels (dark)",
+	parameters: { theme: "dark" },
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<ComfortableRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+/**
+ * The same labeled threads in compact density. `CompactRowBody` carries no
+ * label rendering today — this documents that as the approved current
+ * behavior, not an oversight in the story.
+ */
+export const CompactLabels: Story = {
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<CompactRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+/** Compact density, dark theme. */
+export const CompactLabelsDark: Story = {
+	name: "Compact Labels (dark)",
+	parameters: { theme: "dark" },
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<CompactRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};

package/src/components/selection-sheet.render.test.ts

@@ -120,6 +120,36 @@ describe("SelectionSheet", () => {
 		assert.doesNotMatch(html, /Select similar messages/);
 	});
 
+	/**
+	 * jsdom lays nothing out, so these assert the constraint itself rather than a
+	 * measured height: the sheet must not carry a fixed pixel ceiling (which sat
+	 * below its own content at 411×759 and clipped the last action), and its body
+	 * must scroll rather than clip whatever the ceiling does cut off (#405).
+	 */
+	it("caps the expanded height against the viewport, not a fixed pixel ceiling", () => {
+		const html = renderToString(
+			createElement(SelectionSheet, { ...base, startExpanded: true }),
+		);
+		assert.match(html, /max-height:70dvh/);
+		assert.doesNotMatch(html, /max-height:min\(/);
+	});
+
+	it("scrolls the expanded actions instead of clipping them", () => {
+		const html = renderToString(
+			createElement(SelectionSheet, {
+				...base,
+				startExpanded: true,
+				onSelectSimilar: noop,
+				onSomethingElse: noop,
+			}),
+		);
+		assert.match(html, /class="flex min-h-0 flex-1 flex-col overflow-y-auto /);
+		assert.doesNotMatch(
+			html,
+			/class="flex min-h-0 flex-1 flex-col overflow-hidden /,
+		);
+	});
+
 	it("renders a partial-failure notice with a Retry action", () => {
 		const html = renderToString(
 			createElement(SelectionSheet, {

package/src/components/selection-sheet.stories.tsx

@@ -66,6 +66,27 @@ export const Expanded: Story = {
 	args: { startExpanded: true, moveSlot: <MoveSlot /> },
 };
 
+/**
+ * The same expanded sheet on the shortest phone viewport a real device reports
+ * (411×759 — Android Chrome with its address bar and system nav showing). This
+ * is the tallest the content ever gets: select-all, all three quick actions and
+ * both smart-flow rows. A fixed height ceiling cut "Something else" off here
+ * with no way to reach it (#405); the sheet now takes the height its content
+ * needs, and scrolls only when the viewport genuinely can't hold it.
+ */
+export const ExpandedShortViewport: Story = {
+	globals: { viewport: { value: "mobileShort" } },
+	args: {
+		startExpanded: true,
+		moveSlot: <MoveSlot />,
+		selectAll: {
+			checked: false,
+			indeterminate: true,
+			onChange: () => undefined,
+		},
+	},
+};
+
 /** While a search result set pages to its total: the count isn't known, the
  *  quick actions are replaced by the running total and an explicit Stop. */
 export const Counting: Story = {

package/src/components/selection-sheet.tsx

@@ -24,9 +24,13 @@ const formatCount = (n: number): string => n.toLocaleString();
 
 /** The peek height of the collapsed teaser row (px). */
 export const SELECTION_SHEET_TEASER_HEIGHT = 56;
-/** Ceiling on the expanded sheet height (px); CSS clamps to a third of the
- *  viewport below this. */
-const EXPANDED_MAX = 320;
+/** Ceiling on the expanded sheet height, as a share of the dynamic viewport.
+ *  The sheet is otherwise sized by its own content, so the ceiling binds only on
+ *  a viewport too short to hold the actions — and there they scroll. */
+const EXPANDED_MAX_DVH = 70;
+/** Assumed expanded height until the sheet has been measured; only sets the
+ *  collapsed translate for the first frame. */
+const EXPANDED_HEIGHT_FALLBACK = 320;
 
 const SNAP_MS = 320;
 const SNAP_EASE = "cubic-bezier(0.32, 0.9, 0.3, 1)";
@@ -131,11 +135,16 @@ export interface SelectionSheetProps {
 
 /**
  * The mobile multi-select surface: a peeking bottom sheet that teases at ~56px
- * with the selection count, and expands by drag or tap to a third-height sheet
- * carrying the bulk verbs (Delete / Move / Junk), the select-similar → organize
- * entries, and every escalation state (counting, running progress,
- * partial-failure) the selection can be in. Drag or tap the grabber to collapse
- * back to the teaser; the selection is untouched.
+ * with the selection count, and expands by drag or tap to carry the bulk verbs
+ * (Delete / Move / Junk), the select-similar → organize entries, and every
+ * escalation state (counting, running progress, partial-failure) the selection
+ * can be in. Drag or tap the grabber to collapse back to the teaser; the
+ * selection is untouched.
+ *
+ * Expanded, it takes the height its own content needs, up to
+ * {@link EXPANDED_MAX_DVH}% of the dynamic viewport, past which the actions
+ * scroll. A fixed ceiling sat below the content on a short phone viewport and
+ * cut the last action off with no way to reach it (#405).
  *
  * Sits absolutely against the bottom of the nearest positioned ancestor, so the
  * list it belongs to must be a `relative` container and pad its own bottom by
@@ -160,7 +169,9 @@ export function SelectionSheet({
 }: SelectionSheetProps) {
 	const [expanded, setExpanded] = useState(startExpanded);
 	const containerRef = useRef<HTMLDivElement>(null);
-	const [expandedHeight, setExpandedHeight] = useState(EXPANDED_MAX);
+	const [expandedHeight, setExpandedHeight] = useState(
+		EXPANDED_HEIGHT_FALLBACK,
+	);
 
 	// A run or a live count owns the sheet: it stays open so the progress and
 	// status can't be dragged out of sight mid-operation.
@@ -265,7 +276,7 @@ export function SelectionSheet({
 			data-selection-sheet=""
 			className="absolute inset-x-0 bottom-0 z-30 flex select-none flex-col rounded-t-2xl border-t border-line bg-surface shadow-2xl shadow-black/40"
 			style={{
-				maxHeight: `min(${EXPANDED_MAX}px, 38dvh)`,
+				maxHeight: `${EXPANDED_MAX_DVH}dvh`,
 				minHeight: `${SELECTION_SHEET_TEASER_HEIGHT}px`,
 				transform: `translateY(${translate}px)`,
 				transition,
@@ -355,10 +366,12 @@ export function SelectionSheet({
 
 			{/* Expanded content — clipped by the translate when collapsed. It stays
 			    in the DOM at the teaser, so `inert` when collapsed keeps its offscreen
-			    verbs out of the tab order and the a11y tree until the sheet opens. */}
+			    verbs out of the tab order and the a11y tree until the sheet opens.
+			    Scrolls rather than clips, so every verb stays reachable on a viewport
+			    the actions don't fit in (#405). */}
 			<div
 				inert={!expanded ? true : undefined}
-				className="flex min-h-0 flex-1 flex-col overflow-hidden px-4 pb-4"
+				className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4"
 			>
 				{progress && (
 					<div className="mb-3">