@lotics/ui 7.13.0 → 7.15.0

package/AGENTS.md

@@ -50,7 +50,9 @@ Pick by capability, not by name. (→ the source file for the API.)
   `useOptionList` engine; `Picker` is the only one that's a native dropdown.
 - **Pick member(s)** — `MemberSelect` (a `Select` that renders each option as a `MemberChip`,
   single or multi) — the ready member picker; pass it the roster (`members={useMembers().members}`).
-  Don't re-wire `Select` + `renderOptionContent` + a directory by hand. To edit a `select_member`
+  Don't re-wire `Select` + `renderOptionContent` + a directory by hand. For an assignee FILTER that
+  also matches unassigned records, pass `unassignedLabel` → it prepends a muted "unassigned" option
+  (value `MEMBER_UNASSIGNED`), so you never hand-roll a mixed member+none `Select`. To edit a `select_member`
   field IN PLACE (chip at rest → picker on click) use its inline-edit twin `InlineMemberSelect`.
 - **A person / member (display)** — `MemberChip` (avatar + name + optional secondary line) — the
   ONE way to show a member inline: a picker option, an assignee, a `select_member` value. Pure:
@@ -888,7 +890,7 @@ CalloutText · CalloutActions) · kpi_card · kpi_strip · summary_line (Summary
 bar_chart · line_chart · pie_chart · ring_gauge · progress_bar · stacked_progress_bar · breakdown ·
 funnel (Funnel — conversion funnel: narrowing bars + the step rate as a bold aligned headline row, count below; `orientation` vertical|horizontal, `onSelect`/`selectedKey` press-to-drill; the subset/drop-off sibling of stacked_progress_bar's whole-split) ·
 status_grid (StatusGrid + StatusLegend) · heatmap (density cross-tab — colour-only, no numbers) · matrix (Matrix — the PIVOT cross-tab: band-compound `Matrix` root + `Matrix.Header` (corner + axis labels) + `Matrix.Grid` (`display` number|heat|both — the cells, pressable, the value IN the cell) + `Matrix.Totals` (row + column + grand) + `Matrix.Legend`; the data layer `matrixTotals`/`MatrixAxisItem`/`MatrixCellRef` import from `@lotics/ui/matrix_totals`. Pick over `Heatmap` when the NUMBER and totals matter, not just where it clusters) · legend_item · remainder_meter · allocation_row ·
-scan_field · file_dropzone · files_editor (FilesEditor — THE all-in-one attachment field: FileGrid + a toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only, never in the default view; `selectTileRemove={false}` drops even that so delete is menu-only) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `selectTileRemove`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines are LAZY (dynamic-imported, ~free until a doc of that type is opened) so custom-code APPS can use it too — they just add `@lotics/docx` + `@lotics/xlsx` to their deps. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
+scan_field · file_dropzone · files_editor (FilesEditor — THE all-in-one attachment field: FileGrid + a toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only, never in the default view; `selectTileRemove={false}` drops even that so delete is menu-only) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `selectTileRemove`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines (pdf.js · `@lotics/docx` · `@lotics/xlsx`) are LAZY (dynamic-imported, ~free until a doc of that type is opened) and SHIP AS `@lotics/ui` deps (7.14.0+) — custom-code apps get PDF/Word/Excel preview with ZERO extra install. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
 file_gallery_modal · image_gallery · use_selection (useSelection — always-on multi-select state for a register/list: the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`; selectability gating stays with the caller. The checkbox-always-visible counterpart to `use_selection_mode`) · use_selection_mode · share_or_download · rotate_image · avatar · skeleton · activity_indicator · loading · divider ·
 spacer · stack · section_card · page_header · page_content · calendar (calendar/index.ts) · gantt ·
 comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.13.0",
+  "version": "7.15.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -240,17 +240,17 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@lotics/docx": "^0.1.0",
+    "@lotics/xlsx": "^0.1.0",
+    "pdfjs-dist": "^6.0.227",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0"
   },
   "peerDependencies": {
-    "@lotics/docx": "^0.1.0",
-    "@lotics/xlsx": "^0.1.0",
     "@react-native-picker/picker": ">=2.0.0",
     "expo-image": ">=3.0.0",
     "lucide-react": ">=0.460.0",
     "lucide-react-native": ">=0.460.0",
-    "pdfjs-dist": ">=6.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-native": ">=0.85.0",
@@ -258,15 +258,6 @@
     "react-native-web": ">=0.20.0"
   },
   "peerDependenciesMeta": {
-    "@lotics/docx": {
-      "optional": true
-    },
-    "@lotics/xlsx": {
-      "optional": true
-    },
-    "pdfjs-dist": {
-      "optional": true
-    },
     "expo-image": {
       "optional": true
     },
@@ -287,12 +278,9 @@
     "test": "vitest run"
   },
   "devDependencies": {
-    "@lotics/docx": "^0.1.0",
-    "@lotics/xlsx": "^0.1.0",
     "@types/react-dom": "~19.2.2",
     "@vitejs/plugin-react": "^4.3.4",
     "lucide-react": "^0.562.0",
-    "pdfjs-dist": "^6.0.227",
     "react-dom": "^19.2.0",
     "react-native-web": "^0.21.0",
     "vite": "^7.2.4"

package/src/member_select.tsx

@@ -8,6 +8,12 @@ import {
   type PickerOnClose,
 } from "./picker";
 import { MemberChip } from "./member_chip";
+import { Text } from "./text";
+
+/** The `value` of {@link MemberSelect}'s "unassigned" option (present only when
+ *  `unassignedLabel` is set). Check a `MemberSelect` value against it to detect
+ *  "no member assigned" — e.g. `value.includes(MEMBER_UNASSIGNED)` in a filter. */
+export const MEMBER_UNASSIGNED = "__unassigned__";
 
 /** A candidate member for {@link MemberSelect}. Shaped to accept a `useMembers`
  *  row from `@lotics/app-sdk` (or any roster) directly. */
@@ -35,6 +41,13 @@ interface MemberSelectProps<MULTI extends boolean = false> {
   /** Show an in-menu search box to filter the roster; default false. */
   searchable?: boolean;
   includeEmptyOption?: boolean;
+  /**
+   * When set, prepend a selectable "unassigned" option (value {@link MEMBER_UNASSIGNED}),
+   * rendered as muted text — for an assignee FILTER that also matches "no one assigned".
+   * Distinct from `includeEmptyOption` (a single-select CLEAR row that unsets the value):
+   * this is a real, filterable value the consumer detects in `value`.
+   */
+  unassignedLabel?: string;
   enableSelectAll?: boolean;
   /** Label for the "select all" link in multi-select mode. Pass a translated string. */
   selectAllLabel?: string;
@@ -61,16 +74,20 @@ interface MemberSelectProps<MULTI extends boolean = false> {
  * ```
  */
 export function MemberSelect<MULTI extends boolean = false>(props: MemberSelectProps<MULTI>) {
-  const { members, ...picker } = props;
+  const { members, unassignedLabel, ...picker } = props;
 
   const byId = useMemo(() => new Map(members.map((m) => [m.id, m])), [members]);
   const options = useMemo<PickerOption<string>[]>(
-    () => members.map((m) => ({ value: m.id, label: m.name || m.email || m.id })),
-    [members],
+    () => [
+      ...(unassignedLabel ? [{ value: MEMBER_UNASSIGNED, label: unassignedLabel }] : []),
+      ...members.map((m) => ({ value: m.id, label: m.name || m.email || m.id })),
+    ],
+    [members, unassignedLabel],
   );
 
   const renderOptionContent = useCallback(
     (option: PickerOption<string>) => {
+      if (option.value === MEMBER_UNASSIGNED) return <Text size="sm" color="muted">{option.label}</Text>;
       const member = byId.get(option.value);
       if (!member) return null;
       return <MemberChip name={member.name || member.email} image={member.image} />;