@remit/ui 0.0.41 → 0.0.42

package/package.json

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

package/src/components/filter-clause-chip.tsx

@@ -0,0 +1,211 @@
+import { Plus, Sparkles, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import {
+	type ClauseField,
+	clauseFieldLabel,
+	clauseFieldOrder,
+	type RuleClause,
+	type RuleWiden,
+	widenChipLabel,
+} from "./filter-rule.js";
+import { Input } from "./input.js";
+import { Select } from "./select.js";
+
+const chipShell =
+	"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs";
+
+export interface ClauseChipProps {
+	clause: RuleClause;
+	onEdit?: () => void;
+	onRemove?: () => void;
+}
+
+export function ClauseChip({ clause, onEdit, onRemove }: ClauseChipProps) {
+	return (
+		<span
+			className={cn(
+				chipShell,
+				clause.derived
+					? "border-dashed border-line-strong bg-surface-sunken"
+					: "border-line bg-surface",
+			)}
+		>
+			<button
+				type="button"
+				onClick={onEdit}
+				aria-label={`Edit ${clauseFieldLabel(clause.field)} clause`}
+				className="flex items-center gap-1 text-left"
+			>
+				<span className="font-medium text-fg-muted">
+					{clauseFieldLabel(clause.field)}
+				</span>
+				<span className="text-fg">{clause.value}</span>
+			</button>
+			{clause.derived && (
+				<span className="text-2xs text-fg-subtle">from sender</span>
+			)}
+			{onRemove && (
+				<button
+					type="button"
+					onClick={onRemove}
+					aria-label={`Remove ${clauseFieldLabel(clause.field)} clause`}
+					className="flex size-4 items-center justify-center rounded-full text-fg-subtle hover:bg-surface-sunken hover:text-fg-muted"
+				>
+					<X className="size-3" />
+				</button>
+			)}
+		</span>
+	);
+}
+
+export interface WidenChipProps {
+	widen: RuleWiden;
+	onRemove?: () => void;
+}
+
+function WidenRemoveButton({ onRemove }: { onRemove: () => void }) {
+	return (
+		<button
+			type="button"
+			onClick={onRemove}
+			aria-label="Remove the similar-mail widen"
+			className="flex size-4 items-center justify-center rounded-full hover:bg-fg-subtle/20"
+		>
+			<X className="size-3" />
+		</button>
+	);
+}
+
+/**
+ * The semantic widen as one chip (RFC 038 D3). Active it reads "…and anything
+ * similar" with the anchor count; inactive it says the deployment cannot
+ * evaluate it and the rule matches by its literal clauses only (D4). Either
+ * way it is removable like any other chip — a dead anchor is exactly what a
+ * user needs to be able to take off a degraded rule.
+ */
+export function WidenChip({ widen, onRemove }: WidenChipProps) {
+	if (widen.inactive) {
+		return (
+			<span
+				className={cn(
+					chipShell,
+					"border-dashed border-line-strong bg-surface-sunken text-fg-subtle",
+				)}
+			>
+				<Sparkles className="size-3 shrink-0" aria-hidden="true" />
+				<span className="line-through">{widenChipLabel(widen)}</span>
+				<span className="text-2xs">not available here</span>
+				{onRemove && <WidenRemoveButton onRemove={onRemove} />}
+			</span>
+		);
+	}
+
+	return (
+		<span
+			className={cn(
+				chipShell,
+				"border-accent-2 bg-accent-2-soft text-accent-2",
+			)}
+		>
+			<Sparkles className="size-3 shrink-0" aria-hidden="true" />
+			<span className="font-medium">…and anything similar</span>
+			<span className="text-2xs opacity-80">{widenChipLabel(widen)}</span>
+			{onRemove && <WidenRemoveButton onRemove={onRemove} />}
+		</span>
+	);
+}
+
+export interface AddChipButtonProps {
+	label: string;
+	onClick?: () => void;
+}
+
+export function AddChipButton({ label, onClick }: AddChipButtonProps) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={cn(
+				chipShell,
+				"border-dashed border-line-strong text-fg-muted hover:border-accent-2 hover:text-accent-2",
+			)}
+		>
+			<Plus className="size-3" aria-hidden="true" />
+			{label}
+		</button>
+	);
+}
+
+export interface ClauseDraft {
+	field: ClauseField;
+	value: string;
+}
+
+export interface ClauseEditorProps {
+	draft: ClauseDraft;
+	/** `add` seeds a new clause; `edit` amends an existing one. */
+	mode: "add" | "edit";
+	onChangeField?: (field: ClauseField) => void;
+	onChangeValue?: (value: string) => void;
+	onSubmit?: () => void;
+	onCancel?: () => void;
+}
+
+/**
+ * Inline form for adding or editing one clause — field picker plus a value
+ * input, from the design-system primitives so it never drifts from the rest of
+ * the editor. The chip it produces renders through {@link ClauseChip}.
+ */
+export function ClauseEditor({
+	draft,
+	mode,
+	onChangeField,
+	onChangeValue,
+	onSubmit,
+	onCancel,
+}: ClauseEditorProps) {
+	return (
+		<div className="flex flex-wrap items-center gap-2 rounded-lg border border-accent-2 bg-surface p-2">
+			<Select
+				aria-label="Clause field"
+				value={draft.field}
+				onChange={(e) => onChangeField?.(e.target.value as ClauseField)}
+				className="h-8 w-32 shrink-0"
+			>
+				{clauseFieldOrder.map((field) => (
+					<option key={field} value={field}>
+						{clauseFieldLabel(field)}
+					</option>
+				))}
+			</Select>
+			<Input
+				aria-label="Clause value"
+				value={draft.value}
+				placeholder="value…"
+				onChange={(e) => onChangeValue?.(e.target.value)}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") onSubmit?.();
+				}}
+				className="h-8 min-w-40 flex-1"
+			/>
+			<Button
+				variant="primary"
+				size="sm"
+				onClick={onSubmit}
+				disabled={draft.value.trim() === ""}
+				className="shrink-0"
+			>
+				{mode === "add" ? "Add" : "Save"}
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				onClick={onCancel}
+				aria-label="Cancel clause edit"
+				icon={<X className="size-4" />}
+				className="shrink-0 px-2"
+			/>
+		</div>
+	);
+}

package/src/components/filter-preview-count.tsx

@@ -0,0 +1,57 @@
+import { AlertTriangle, Loader2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { type PreviewCount, previewCountSummary } from "./filter-rule.js";
+
+export interface FilterPreviewCountProps {
+	preview: PreviewCount;
+}
+
+/**
+ * The live match count (RFC 038 D1). It never goes blank between counts: a
+ * clause change flips the last count to `stale` and says it is recounting
+ * rather than dropping to zero and reading as "nothing matches".
+ */
+export function FilterPreviewCount({ preview }: FilterPreviewCountProps) {
+	const summary = previewCountSummary(preview);
+
+	if (preview.status === "loading") {
+		return (
+			<p
+				className="flex items-center gap-2 text-xs text-fg-muted"
+				aria-live="polite"
+			>
+				<Loader2 className="size-3.5 animate-spin" aria-hidden="true" />
+				{summary}
+			</p>
+		);
+	}
+
+	if (preview.status === "error") {
+		return (
+			<p className="flex items-center gap-2 text-xs text-danger" role="alert">
+				<AlertTriangle className="size-3.5 shrink-0" aria-hidden="true" />
+				{summary}
+			</p>
+		);
+	}
+
+	const empty = preview.count === 0;
+	return (
+		<p
+			className={cn(
+				"flex items-center gap-2 text-xs",
+				preview.stale
+					? "text-fg-subtle"
+					: empty
+						? "text-fg-muted"
+						: "font-medium text-fg",
+			)}
+			aria-live="polite"
+		>
+			{preview.stale && (
+				<Loader2 className="size-3.5 animate-spin" aria-hidden="true" />
+			)}
+			{summary}
+		</p>
+	);
+}

package/src/components/filter-rule-editor.stories.tsx

@@ -0,0 +1,336 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMemo, useState } from "react";
+import { ClauseChip, ClauseEditor, WidenChip } from "./filter-clause-chip.js";
+import { FilterPreviewCount } from "./filter-preview-count.js";
+import {
+	type ClauseField,
+	clauseFieldLabel,
+	demoFolders,
+	demoRule,
+	demoSenderFallbackRule,
+	demoVocabularyRule,
+	type FilterRule,
+	type PreviewCount,
+	type RuleClause,
+} from "./filter-rule.js";
+import {
+	type ClauseEditState,
+	FilterRuleEditor,
+	type FilterRuleEditorProps,
+} from "./filter-rule-editor.js";
+
+const meta: Meta<typeof FilterRuleEditor> = {
+	title: "FilterRuleEditor",
+	component: FilterRuleEditor,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="mx-auto max-w-md rounded-xl border border-line bg-surface">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof FilterRuleEditor>;
+
+const READY = (count: number, stale?: boolean): PreviewCount => ({
+	status: "ready",
+	count,
+	stale,
+});
+
+/**
+ * A fully wired editor so every affordance is live in the story — add, edit and
+ * remove clauses, toggle the operator and scope, watch the count follow. The
+ * count settles instantly here so the commit stays usable; the loading and
+ * recounting states have their own stories. State is local; no app, no network.
+ */
+function LiveEditor({
+	initialRule,
+	semanticAvailable = true,
+}: {
+	initialRule: FilterRule;
+	semanticAvailable?: boolean;
+}) {
+	const [rule, setRule] = useState<FilterRule>(initialRule);
+	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
+
+	const preview = useMemo<PreviewCount>(
+		() => READY(rule.clauses.length * 23 + (rule.widen ? 40 : 0)),
+		[rule],
+	);
+
+	const handlers: Partial<FilterRuleEditorProps> = {
+		onStartAddClause: () =>
+			setClauseEdit({ mode: "add", draft: { field: "From", value: "" } }),
+		onStartEditClause: (clauseId) => {
+			const clause = rule.clauses.find((c) => c.id === clauseId);
+			if (!clause) return;
+			setClauseEdit({
+				mode: "edit",
+				clauseId,
+				draft: { field: clause.field, value: clause.value },
+			});
+		},
+		onRemoveClause: (clauseId) => {
+			setRule((r) => ({
+				...r,
+				clauses: r.clauses.filter((c) => c.id !== clauseId),
+			}));
+		},
+		onChangeDraftField: (field) =>
+			setClauseEdit((e) => (e ? { ...e, draft: { ...e.draft, field } } : e)),
+		onChangeDraftValue: (value) =>
+			setClauseEdit((e) => (e ? { ...e, draft: { ...e.draft, value } } : e)),
+		onSubmitClause: () => {
+			setClauseEdit((edit) => {
+				if (!edit) return undefined;
+				setRule((r) => {
+					if (edit.mode === "add") {
+						const clause: RuleClause = {
+							id: `c-${Date.now()}`,
+							field: edit.draft.field,
+							value: edit.draft.value,
+						};
+						return { ...r, clauses: [...r.clauses, clause] };
+					}
+					return {
+						...r,
+						clauses: r.clauses.map((c) =>
+							c.id === edit.clauseId
+								? { ...c, field: edit.draft.field, value: edit.draft.value }
+								: c,
+						),
+					};
+				});
+				return undefined;
+			});
+		},
+		onCancelClause: () => setClauseEdit(undefined),
+		onAddWiden: () => {
+			setRule((r) => ({ ...r, widen: { anchorCount: 2 } }));
+		},
+		onRemoveWiden: () => {
+			setRule((r) => ({ ...r, widen: undefined }));
+		},
+		onChangeMatchOperator: (matchOperator) => {
+			setRule((r) => ({ ...r, matchOperator }));
+		},
+		onChangeMove: (moveMailboxId) =>
+			setRule((r) => ({ ...r, moveMailboxId: moveMailboxId || undefined })),
+		onChangeScope: (scope) => setRule((r) => ({ ...r, scope })),
+		onChangeName: (name) => setRule((r) => ({ ...r, name })),
+		onChangeUntil: (until) => setRule((r) => ({ ...r, until })),
+	};
+
+	return (
+		<FilterRuleEditor
+			rule={rule}
+			folders={demoFolders}
+			preview={preview}
+			semanticAvailable={semanticAvailable}
+			clauseEdit={clauseEdit}
+			onCommit={() => {}}
+			onCancel={() => {}}
+			{...handlers}
+		/>
+	);
+}
+
+/** The full editor, interactive — the shape ticket B and the app consume. */
+export const Interactive: Story = {
+	render: () => <LiveEditor initialRule={demoRule} />,
+};
+
+/** Literal clauses joined with "or", including the ticket-B ListId and FromDomain fields. */
+export const AnyOfTheseClauses: Story = {
+	render: () => <LiveEditor initialRule={demoVocabularyRule} />,
+};
+
+/** A one-time rule — no name, no widen, the commit reads "Apply now". */
+export const OneTimeMove: Story = {
+	args: {
+		rule: {
+			clauses: [{ id: "c1", field: "Subject", value: "receipt" }],
+			matchOperator: "all",
+			moveMailboxId: "mbx-receipts",
+			scope: "once",
+		},
+		folders: demoFolders,
+		preview: READY(12),
+	},
+};
+
+/** Standing scope with a widen — the "keep doing this" rule. */
+export const StandingWithWiden: Story = {
+	args: {
+		rule: demoRule,
+		folders: demoFolders,
+		preview: READY(47),
+		semanticAvailable: true,
+	},
+};
+
+/** Timed scope — the name and a date the rule stops on. */
+export const UntilADate: Story = {
+	args: {
+		rule: {
+			...demoRule,
+			scope: "until",
+			until: "2026-09-01",
+			name: "Conference",
+		},
+		folders: demoFolders,
+		preview: READY(31),
+		semanticAvailable: true,
+	},
+};
+
+/**
+ * The sender-fallback (#251) as chips: the derived From clauses are ordinary
+ * visible, editable chips, not an invisible substitution.
+ */
+export const SenderFallbackChips: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={demoSenderFallbackRule}
+			semanticAvailable={false}
+		/>
+	),
+};
+
+/**
+ * The deployment cannot serve the widen (RFC 038 D4): the "…and similar" add is
+ * not offered and the rule matches by its literal clauses only.
+ */
+export const SemanticUnavailable: Story = {
+	args: {
+		rule: { ...demoRule, widen: undefined },
+		folders: demoFolders,
+		preview: READY(24),
+		semanticAvailable: false,
+	},
+};
+
+/**
+ * A standing rule that carries an anchor this deployment cannot evaluate — the
+ * widen chip lists as inactive and nothing claims similarity is running.
+ */
+export const DegradedStandingWiden: Story = {
+	args: {
+		rule: { ...demoRule, widen: { anchorCount: 2, inactive: true } },
+		folders: demoFolders,
+		preview: READY(19),
+		semanticAvailable: false,
+	},
+};
+
+/** Nothing to match yet — the commit says why it is blocked. */
+export const BlockedEmpty: Story = {
+	args: {
+		rule: {
+			clauses: [],
+			matchOperator: "all",
+			scope: "once",
+		},
+		folders: demoFolders,
+		preview: READY(0),
+		semanticAvailable: true,
+	},
+};
+
+/** The live count while it recomputes — the commit waits for it to settle. */
+export const PreviewLoading: Story = {
+	args: {
+		rule: demoRule,
+		folders: demoFolders,
+		preview: { status: "loading" },
+		semanticAvailable: true,
+	},
+};
+
+/**
+ * The previewed set changed under the rule — recounting, never blank, and the
+ * "Save rule" button is held disabled until the count that will be applied is
+ * the count on screen (RFC 038's previewed-set-equals-applied-set contract).
+ */
+export const PreviewStale: Story = {
+	args: {
+		rule: demoRule,
+		folders: demoFolders,
+		preview: READY(47, true),
+		semanticAvailable: true,
+	},
+};
+
+/** The preview failed — the count region raises it, the editor stays usable. */
+export const PreviewError: Story = {
+	args: {
+		rule: demoRule,
+		folders: demoFolders,
+		preview: { status: "error", reason: "Couldn't reach the server to count." },
+		semanticAvailable: true,
+	},
+};
+
+type ChipStory = StoryObj;
+
+/** Every clause and widen chip in isolation, including edit and inactive states. */
+export const ChipGallery: ChipStory = {
+	render: () => {
+		const fields: ClauseField[] = [
+			"From",
+			"Subject",
+			"HasWords",
+			"ListId",
+			"FromDomain",
+		];
+		return (
+			<div className="space-y-4 p-4">
+				<div className="flex flex-wrap gap-2">
+					{fields.map((field) => (
+						<ClauseChip
+							key={field}
+							clause={{ id: field, field, value: clauseFieldLabel(field) }}
+							onEdit={() => {}}
+							onRemove={() => {}}
+						/>
+					))}
+				</div>
+				<div className="flex flex-wrap gap-2">
+					<ClauseChip
+						clause={{
+							id: "d",
+							field: "From",
+							value: "receipts@stripe.com",
+							derived: true,
+						}}
+						onEdit={() => {}}
+						onRemove={() => {}}
+					/>
+					<WidenChip widen={{ anchorCount: 2 }} onRemove={() => {}} />
+					<WidenChip widen={{ anchorCount: 2, inactive: true }} />
+				</div>
+				<ClauseEditor
+					draft={{ field: "ListId", value: "python-dev.python.org" }}
+					mode="edit"
+					onChangeField={() => {}}
+					onChangeValue={() => {}}
+					onSubmit={() => {}}
+					onCancel={() => {}}
+				/>
+				<div className="space-y-2">
+					<FilterPreviewCount preview={{ status: "loading" }} />
+					<FilterPreviewCount preview={READY(0)} />
+					<FilterPreviewCount preview={READY(412)} />
+					<FilterPreviewCount preview={READY(47, true)} />
+					<FilterPreviewCount
+						preview={{ status: "error", reason: "Couldn't count." }}
+					/>
+				</div>
+			</div>
+		);
+	},
+};