@appinternalleads/ui 0.2.0

package/src/components/onboarding/file-shared/index.ts

@@ -0,0 +1,9 @@
+export {
+  FILE_SHARED_IN_FLIGHT, FILE_SHARED_PRESETS, FILE_SHARED_SCENES, validateFileShared,
+  type FileSharedScene, type FileSharedSettings, type SharedFile,
+} from './contract';
+export {
+  fileSharedSeed, fileSharedView, initialFileShared, reduceFileShared,
+  type DownloadPhase, type FileRow, type FileSharedAction, type FileSharedSeed, type FileSharedState,
+} from './engine';
+export { FileShared, type FileSharedOperations, type FileSharedProps } from './FileSharedView';

package/src/components/onboarding/file-shared/presets.json

@@ -0,0 +1,181 @@
+{
+  "component": "file-shared",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "file",
+    "icon": "folder",
+    "title": "Shared with you",
+    "subtitle": "Files from your team",
+    "failIndex": 0,
+    "files": [
+      {
+        "name": "Brief.pdf",
+        "type": "PDF",
+        "sharedBy": "Ayesha",
+        "when": "2h ago",
+        "size": "4.2 MB",
+        "isNew": false,
+        "icon": "doc"
+      },
+      {
+        "name": "Roadmap.xlsx",
+        "type": "XLSX",
+        "sharedBy": "Sam",
+        "when": "Yesterday",
+        "size": "860 KB",
+        "isNew": false,
+        "icon": "table"
+      },
+      {
+        "name": "Logo.svg",
+        "type": "SVG",
+        "sharedBy": "Jo",
+        "when": "Mon",
+        "size": "14 KB",
+        "isNew": false,
+        "icon": "image"
+      }
+    ],
+    "emptyTitle": "Nothing shared yet",
+    "emptyBody": "Files people share with you will appear here.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "title": "Client deliverables",
+      "subtitle": "From Studio North",
+      "files": [
+        {
+          "name": "Final cut.mp4",
+          "type": "MP4",
+          "sharedBy": "Studio North",
+          "when": "1h ago",
+          "size": "1.2 GB",
+          "isNew": false,
+          "icon": "video"
+        },
+        {
+          "name": "Invoice.pdf",
+          "type": "PDF",
+          "sharedBy": "Studio North",
+          "when": "1h ago",
+          "size": "96 KB",
+          "isNew": false,
+          "icon": "receipt"
+        }
+      ],
+      "ship": "downloading"
+    },
+    "case3": {
+      "title": "Lab results",
+      "subtitle": "Shared by Riverside Lab",
+      "files": [
+        {
+          "name": "Report.pdf",
+          "type": "PDF",
+          "sharedBy": "Riverside Lab",
+          "when": "20 min ago",
+          "size": "310 KB",
+          "isNew": true,
+          "icon": "doc"
+        }
+      ]
+    },
+    "case4": {
+      "title": "Design handoff",
+      "subtitle": "Northwind app refresh",
+      "files": [
+        {
+          "name": "Specs.fig",
+          "type": "FIG",
+          "sharedBy": "Lena",
+          "when": "3h ago",
+          "size": "38 MB",
+          "isNew": false,
+          "icon": "pen"
+        },
+        {
+          "name": "Assets.zip",
+          "type": "ZIP",
+          "sharedBy": "Lena",
+          "when": "3h ago",
+          "size": "212 MB",
+          "isNew": false,
+          "icon": "box"
+        }
+      ],
+      "failIndex": 1,
+      "ship": "failed"
+    },
+    "case5": {
+      "type": "agent",
+      "title": "Agent outputs",
+      "subtitle": "Files your assistant made",
+      "files": [
+        {
+          "name": "Summary.md",
+          "type": "MD",
+          "sharedBy": "Your assistant",
+          "when": "5 min ago",
+          "size": "8 KB",
+          "isNew": true,
+          "icon": "doc"
+        },
+        {
+          "name": "Chart.png",
+          "type": "PNG",
+          "sharedBy": "Your assistant",
+          "when": "5 min ago",
+          "size": "240 KB",
+          "isNew": false,
+          "icon": "chart"
+        },
+        {
+          "name": "Data.csv",
+          "type": "CSV",
+          "sharedBy": "Your assistant",
+          "when": "5 min ago",
+          "size": "1.1 MB",
+          "isNew": false,
+          "icon": "table"
+        }
+      ],
+      "ship": "empty",
+      "emptyBody": "Your assistant hasn’t shared any files yet.",
+      "emptyCta": "Check again"
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS",
+      "title": "Team files",
+      "scenario": "Three files from teammates."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Agency",
+      "title": "Client deliverables",
+      "scenario": "A 1.2 GB video is downloading."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Clinic",
+      "title": "Lab results",
+      "scenario": "A lab has shared one new report."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Creative",
+      "title": "Design handoff",
+      "scenario": "The assets archive failed to download."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Agent outputs",
+      "scenario": "Ships empty. \"Check again\" fills the list with the assistant’s files."
+    }
+  }
+}

package/src/components/onboarding/filter-panel/FilterPanelView.tsx

@@ -0,0 +1,221 @@
+import { useState } from 'react';
+import { Box, Pressable, Text } from '../../../core';
+import { Button, Checkbox, useRovingSelect } from '../../../ds';
+import { blockRadii, segmentLift, useDs, type DensityName } from '../../../tokens';
+import { iconFor, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import type { OnboardingOperation } from '../shared/mock';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { OnboardingCard } from '../shared/OnboardingCard';
+import { ExpandRegion, HueTile, UnreadDot } from '../shared/parts';
+import { usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { FILTER_PRESETS, FILTER_STACK_BELOW, validateFilterPanel, type FilterItem, type FilterPanelSettings, type PriorityFilter } from './contract';
+import { filterSeed, filterView, initialFilterPanel, matches, reduceFilterPanel, type FilterPanelSeed } from './engine';
+import { guarded } from '../shared/guard';
+
+export type FilterPanelProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<FilterPanelSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  /** Filtering is local; there is no async action to fail. Accepted for the shared shape. */
+  result?: OnboardingResult;
+  reload?: OnboardingOperation<void>;
+  initial?: FilterPanelSeed;
+  /** The card's width (default 900, the demo board's); in a narrower host it is fluid. Below 640 it stacks. */
+  width?: number;
+  onChange?: (filters: { types: string[]; priority: PriorityFilter }) => void;
+  onRead?: (item: FilterItem) => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+const PRIORITIES: [PriorityFilter, string][] = [['all', 'All'], ['high', 'High'], ['normal', 'Normal']];
+
+/**
+ * **Filter Panel** — a type checklist (checkbox, name, count), a priority segmented radiogroup and
+ * Clear, beside the list; under 640px the panel folds under a "Filters · 2" button (M3). Every row
+ * stays mounted: a row that stops matching collapses (M14) and leaves the tab order and the
+ * accessibility tree. No type checked means all types; "Showing n of N" is live.
+ */
+function FilterPanelView(props: FilterPanelProps) {
+  const config = resolveConfig(FILTER_PRESETS, props.preset, props.config);
+  const issues = validateFilterPanel(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status, reload, initial, width = 900, onChange, onRead, onScene, testID,
+}: Omit<FilterPanelProps, 'config'> & { config: FilterPanelSettings }) {
+  const { colors, density: d } = useDs();
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send, ref] = useSeededReducer(
+    reduceFilterPanel,
+    () => initialFilterPanel(config, initial ?? (config.ship ? filterSeed(config, config.ship) : {})),
+    key,
+  );
+  const pattern = usePatternStatus(status ?? (config.items.length ? 'ready' : 'empty'), reload);
+  const v = filterView(config, state);
+  useSceneReport(pattern.status === 'ready' ? (state.narrow ? 'mobile' : v.scene) : pattern.status, onScene);
+  const [measured, setMeasured] = useState(0);
+  const narrow = state.narrow || width < FILTER_STACK_BELOW || (measured > 0 && measured < FILTER_STACK_BELOW);
+  const open = !narrow || state.panelOpen;
+  const panelId = `fp-panel-${testID ?? config.title.replace(/[^a-z0-9]/gi, '')}`;
+
+  const change = (a: Parameters<typeof send>[0]) => {
+    send(a);
+    const next = reduceFilterPanel(ref.current, a);
+    onChange?.({ types: next.types, priority: next.priority });
+  };
+  const periods = useRovingSelect<PriorityFilter>(PRIORITIES.map(p => p[0]), state.priority, p => change({ type: 'priority', priority: p }));
+  const byId = new Map(config.types.map(t => [t.id, t]));
+
+  const panel = (
+    <Box gap="s4" style={{ paddingTop: 16, paddingHorizontal: 16, paddingBottom: 20 }}>
+      <Box role="group" aria-label="Type" gap="s1">
+        <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600', paddingBottom: 4 }}>Type</Text>
+        {config.types.map(t => (
+          <Box key={t.id} row align="center" gap="s2" style={{ minHeight: 32 }}>
+            <Box flex={1} style={{ minWidth: 0 }}>
+              <Checkbox label={t.label} checked={state.types.includes(t.id)} onChange={() => change({ type: 'toggleType', id: t.id })} />
+            </Box>
+            <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{String(config.items.filter(it => it.type === t.id).length)}</Text>
+          </Box>
+        ))}
+      </Box>
+      <Box gap="s1">
+        <Text nativeID={`${panelId}-pri`} variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>Priority</Text>
+        <Box role="radiogroup" aria-labelledby={`${panelId}-pri`} row gap="s1" style={{ padding: 2, borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken }}>
+          {PRIORITIES.map(([p, label], i) => {
+            const on = state.priority === p;
+            return (
+              <Pressable
+                key={p}
+                ref={periods.ref(i)}
+                role="radio"
+                aria-checked={on}
+                aria-label={label}
+                tabIndex={periods.tabIndex(i)}
+                onKeyDown={periods.onKeyDown(i)}
+                onPress={() => change({ type: 'priority', priority: p })}
+                height={28}
+                px="s2"
+                style={{ flex: 1, borderRadius: blockRadii.tile, backgroundColor: on ? colors.surface1 : 'transparent', boxShadow: on ? segmentLift : 'none' }}>
+                <Text variant="caption" style={{ fontSize: 12, fontWeight: '600', color: on ? colors.textPrimary : colors.textSecondary }}>{label}</Text>
+              </Pressable>
+            );
+          })}
+        </Box>
+      </Box>
+      <Button variant="secondary" size="xsmall" disabled={!v.count} onPress={() => change({ type: 'clear' })}>Clear</Button>
+    </Box>
+  );
+
+  return (
+    <Box style={{ width: '100%', maxWidth: width }}>
+      <OnboardingCard
+        testID={testID}
+        header={config}
+        copy={config}
+        density={density}
+        status={pattern.status}
+        onRetry={pattern.retry}
+        onEmptyAction={pattern.retry}
+        chip={v.chip}
+        flush>
+        <Box
+          onLayout={e => setMeasured(e.nativeEvent.layout.width)}
+          style={{ flexDirection: narrow ? 'column' : 'row', minHeight: 440 }}>
+          {narrow ? (
+            <Box row align="center" justify="space-between" gap="s3" style={{ paddingVertical: 12, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: colors.hairline }}>
+              <Button
+                variant="secondary"
+                size="small"
+                leadingGlyph="funnel"
+                aria-expanded={state.panelOpen}
+                aria-controls={panelId}
+                onPress={() => send({ type: 'panel' })}
+                style={{ minHeight: d.controlH }}>
+                {v.filtersLabel}
+              </Button>
+              <Box role="status" aria-live="polite"><Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{v.showing}</Text></Box>
+            </Box>
+          ) : null}
+          <Box style={narrow
+            ? { borderBottomWidth: open ? 1 : 0, borderBottomColor: colors.hairline }
+            : { width: 220, flexShrink: 0, borderRightWidth: 1, borderRightColor: colors.hairline }}>
+            {narrow ? <ExpandRegion open={open} nativeID={panelId} role="region" label="Filters">{panel}</ExpandRegion> : <Box nativeID={panelId}>{panel}</Box>}
+          </Box>
+          <Box flex={1} style={{ minWidth: 0 }}>
+            {!narrow ? (
+              <Box role="status" aria-live="polite" style={{ paddingTop: 12, paddingHorizontal: 20 }}><Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{v.showing}</Text></Box>
+            ) : null}
+            <Box style={{ paddingTop: 4, paddingHorizontal: 20, paddingBottom: 12 }}>
+              <Box role="list" aria-label={config.title}>
+                {config.items.map((it, i) => {
+                  const t = byId.get(it.type) ?? config.types[0]!;
+                  return (
+                    <FilterRow
+                      key={i}
+                      item={it}
+                      show={matches(state, it)}
+                      unread={it.unread && !state.read.includes(i)}
+                      tile={{ icon: iconFor(t.icon), type: t.type }}
+                      onPress={() => { send({ type: 'read', index: i }); onRead?.(it); }}
+                    />
+                  );
+                })}
+              </Box>
+              {v.noMatch ? (
+                <Box align="center" gap="s1" style={{ paddingVertical: 48, paddingHorizontal: 24 }}>
+                  <Text variant="label" align="center" style={{ fontSize: 14, fontWeight: '600' }}>No notifications match</Text>
+                  <Text variant="caption" color="textSecondary" align="center" style={{ fontSize: 12, maxWidth: 300 }}>Try another type or priority, or clear the filters.</Text>
+                  <Box pt="s2"><Button variant="primary" size="small" onPress={() => change({ type: 'clear' })} style={{ minHeight: d.controlH }}>Clear filters</Button></Box>
+                </Box>
+              ) : null}
+            </Box>
+          </Box>
+        </Box>
+      </OnboardingCard>
+    </Box>
+  );
+}
+
+function FilterRow({ item, show, unread, tile, onPress }: {
+  item: FilterItem; show: boolean; unread: boolean; tile: { icon: ReturnType<typeof iconFor>; type: FilterPanelSettings['types'][number]['type'] }; onPress: () => void;
+}) {
+  const { colors } = useDs();
+  return (
+    <ExpandRegion open={show} role="listitem" lift={6}>
+      <Pressable
+        onPress={onPress}
+        tabIndex={show ? 0 : -1}
+        aria-label={`${item.title}${unread ? ', unread' : ''}${item.priority === 'high' ? ', high priority' : ''}`}
+        row
+        align="flex-start"
+        justify="flex-start"
+        gap="s3"
+        style={{ marginHorizontal: -8, paddingVertical: 10, paddingHorizontal: 8, borderRadius: blockRadii.inset }}>
+        <HueTile icon={tile.icon} type={tile.type} />
+        <Box flex={1} gap="s1" style={{ minWidth: 0 }}>
+          <Text variant="caption" color="textPrimary" style={{ fontSize: 13, fontWeight: unread ? '700' : '600' }}>{item.title}</Text>
+          <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{item.subtitle}</Text>
+        </Box>
+        <Box align="flex-end" gap="s1">
+          <Box row align="center" gap="s2">
+            <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{item.time}</Text>
+            <UnreadDot on={unread} />
+          </Box>
+          {item.priority === 'high' ? (
+            <Box row align="center" height={20} radius="pill" style={{ paddingHorizontal: 8, backgroundColor: colors.statusBg.needsUser }}>
+              <Text variant="caption" style={{ fontSize: 12, fontWeight: '600', color: colors.status.needsUser }}>High</Text>
+            </Box>
+          ) : null}
+        </Box>
+      </Pressable>
+    </ExpandRegion>
+  );
+}
+
+/** FilterPanel, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const FilterPanel = guarded(FilterPanelView, FILTER_PRESETS, 'FilterPanel');

package/src/components/onboarding/filter-panel/contract.ts

@@ -0,0 +1,47 @@
+import type { DataType } from '../../../tokens';
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Filter Panel (batch 3 §3.4)** — filter a notification list by type and priority. Side by side
+ * at 640px and wider; below that the panel folds under a "Filters · 2" button.
+ */
+
+export type FilterType = { id: string; label: string; type: DataType; icon: string };
+export type FilterPriority = 'high' | 'normal';
+export type FilterItem = { type: string; priority: FilterPriority; title: string; subtitle: string; time: string; unread: boolean };
+export type PriorityFilter = 'all' | FilterPriority;
+
+export const FILTER_SCENES = ['default', 'noFilters', 'active', 'highOnly', 'emptyResult', 'mobile', 'loading', 'empty', 'error'] as const;
+export type FilterScene = (typeof FILTER_SCENES)[number];
+/** Scenes that are an operation in flight — none: filtering is local. */
+export const FILTER_IN_FLIGHT: readonly string[] = [];
+
+/** Below this card width the panel stacks above the list. */
+export const FILTER_STACK_BELOW = 640;
+
+export type FilterPanelSettings = HeaderConfig & LoadCopy & {
+  types: FilterType[];
+  items: FilterItem[];
+  /** Type ids checked when the panel opens. None checked means all types. */
+  initialTypes?: string[];
+  initialPriority?: PriorityFilter;
+  /** Demo-only: the scene this case ships in (B2-9). */
+  ship?: FilterScene;
+};
+
+export const FILTER_PRESETS = presetsJson as unknown as PresetsFile<FilterPanelSettings>;
+
+export function validateFilterPanel(c: FilterPanelSettings): OnboardingIssue[] {
+  if (!Array.isArray(c.types) || !c.types.length) return [{ path: 'types', message: 'types must list at least one type.' }];
+  if (!Array.isArray(c.items)) return [{ path: 'items', message: 'items must be a list.' }];
+  const ids = c.types.map(t => t.id);
+  const issues: OnboardingIssue[] = [];
+  c.items.forEach((it, i) => {
+    if (!ids.includes(it.type)) issues.push({ path: `items[${i}].type`, message: `“${it.type}” is not one of the types.` });
+    if (it.priority !== 'high' && it.priority !== 'normal') issues.push({ path: `items[${i}].priority`, message: 'priority is high or normal.' });
+  });
+  (c.initialTypes ?? []).forEach((t, i) => { if (!ids.includes(t)) issues.push({ path: `initialTypes[${i}]`, message: `“${t}” is not one of the types.` }); });
+  if (c.initialPriority !== undefined && !['all', 'high', 'normal'].includes(c.initialPriority)) issues.push({ path: 'initialPriority', message: 'initialPriority is all, high or normal.' });
+  return issues;
+}

package/src/components/onboarding/filter-panel/engine.ts

@@ -0,0 +1,66 @@
+import type { FilterItem, FilterPanelSettings, FilterScene, PriorityFilter } from './contract';
+
+/** **The Filter Panel engine** — pure: the checked types, the priority, and what has been read. */
+
+export type FilterPanelState = { types: string[]; priority: PriorityFilter; read: number[]; narrow: boolean; panelOpen: boolean };
+export type FilterPanelSeed = Partial<FilterPanelState>;
+export type FilterPanelAction =
+  | { type: 'toggleType'; id: string } | { type: 'priority'; priority: PriorityFilter } | { type: 'clear' }
+  | { type: 'read'; index: number } | { type: 'panel' };
+
+export function initialFilterPanel(c: FilterPanelSettings, seed: FilterPanelSeed = {}): FilterPanelState {
+  return {
+    types: seed.types ?? [...(c.initialTypes ?? [])],
+    priority: seed.priority ?? c.initialPriority ?? 'all',
+    read: seed.read ?? [],
+    narrow: seed.narrow ?? false,
+    panelOpen: seed.panelOpen ?? false,
+  };
+}
+
+/** The first type × priority that matches nothing — the prototype's "empty result". */
+export function emptyFilter(c: FilterPanelSettings): { types: string[]; priority: PriorityFilter } {
+  for (const p of ['high', 'normal'] as const) {
+    for (const t of c.types) if (!c.items.some(it => it.type === t.id && it.priority === p)) return { types: [t.id], priority: p };
+  }
+  return { types: [], priority: 'high' };
+}
+
+export function filterSeed(c: FilterPanelSettings, scene: FilterScene): FilterPanelSeed {
+  if (scene === 'noFilters') return { types: [], priority: 'all' };
+  if (scene === 'highOnly') return { types: [], priority: 'high' };
+  if (scene === 'active') return { types: c.types.slice(0, 2).map(t => t.id), priority: 'all' };
+  if (scene === 'emptyResult') return emptyFilter(c);
+  if (scene === 'mobile') return { narrow: true };
+  return {};
+}
+
+export function reduceFilterPanel(s: FilterPanelState, a: FilterPanelAction): FilterPanelState {
+  switch (a.type) {
+    case 'toggleType': return { ...s, types: s.types.includes(a.id) ? s.types.filter(t => t !== a.id) : [...s.types, a.id] };
+    case 'priority': return { ...s, priority: a.priority };
+    case 'clear': return { ...s, types: [], priority: 'all' };
+    case 'read': return s.read.includes(a.index) ? s : { ...s, read: [...s.read, a.index] };
+    case 'panel': return { ...s, panelOpen: !s.panelOpen };
+  }
+}
+
+export function matches(s: Pick<FilterPanelState, 'types' | 'priority'>, it: FilterItem): boolean {
+  return (!s.types.length || s.types.includes(it.type)) && (s.priority === 'all' || it.priority === s.priority);
+}
+
+export function filterView(c: FilterPanelSettings, s: FilterPanelState) {
+  const count = s.types.length + (s.priority === 'all' ? 0 : 1);
+  const visible = c.items.filter(it => matches(s, it)).length;
+  const unread = c.items.filter((it, i) => it.unread && !s.read.includes(i)).length;
+  return {
+    count,
+    visible,
+    unread,
+    noMatch: visible === 0 && c.items.length > 0,
+    showing: `Showing ${visible} of ${c.items.length}`,
+    filtersLabel: count ? `Filters · ${count}` : 'Filters',
+    chip: { tone: 'neutral' as const, label: count ? `${count} ${count === 1 ? 'filter' : 'filters'}` : `${unread} unread`, dot: false },
+    scene: (!visible && c.items.length ? 'emptyResult' : count ? 'active' : 'noFilters') as FilterScene,
+  };
+}

package/src/components/onboarding/filter-panel/index.ts

@@ -0,0 +1,9 @@
+export {
+  FILTER_IN_FLIGHT, FILTER_PRESETS, FILTER_SCENES, FILTER_STACK_BELOW, validateFilterPanel,
+  type FilterItem, type FilterPanelSettings, type FilterPriority, type FilterScene, type FilterType, type PriorityFilter,
+} from './contract';
+export {
+  emptyFilter, filterSeed, filterView, initialFilterPanel, matches as filterMatches, reduceFilterPanel,
+  type FilterPanelAction, type FilterPanelSeed, type FilterPanelState,
+} from './engine';
+export { FilterPanel, type FilterPanelProps } from './FilterPanelView';