@lotics/ui 20.0.0 → 20.0.2

package/LICENSE.md

@@ -0,0 +1,39 @@
+Copyright (c) 2026 Lotics Technology Company Limited. All rights reserved.
+
+This software is proprietary. It is published to the public npm registry for one
+purpose: building on the Lotics platform.
+
+In this license, **Lotics** means Lotics Technology Company Limited, and **the
+Lotics platform** means the hosted services Lotics operates at lotics.ai and its
+subdomains, together with applications, packages and integrations that run on or
+communicate with those services.
+
+## Permitted
+
+You may install this package and use it **solely in connection with the Lotics
+platform** — including bundling it, in whole or in part, into an application that
+runs on or integrates with the Lotics platform.
+
+## Not permitted
+
+Without prior written permission from Lotics you may not:
+
+1. use this software, or any portion of it, independently of the Lotics platform
+   — including in any application, product or service that neither runs on nor
+   integrates with the Lotics platform;
+2. copy, republish, redistribute or sublicense the source code, in whole or in
+   part, other than as the bundled dependency described above;
+3. create derivative works from the source code, or incorporate any portion of it
+   into another library, product or package;
+4. reverse engineer, decompile or disassemble any compiled artifact, except to the
+   extent that restriction is unenforceable under applicable law;
+5. use the source code, or any portion of it, to train or fine-tune a machine
+   learning model.
+
+## No warranty
+
+This software is provided "as is", without warranty of any kind, express or
+implied. In no event shall Lotics be liable for any claim, damages or other
+liability arising from the software or its use.
+
+For any other use, contact minh@lotics.ai.

package/docs/data_entry.md

@@ -115,6 +115,11 @@ One per type:
   GROWS with its content; only a plain label row is the fixed-height `MenuButton`. So a short
   code + the full official name underneath is a supported option shape, not a hack. Reach for it
   whenever the real name is too long to READ in a list but must stay exact somewhere.
+  **The popover is the FIELD's width** (floored at `MIN_CONTROL_WIDTH` so a dense grid cell still
+  opens something readable) — shared by `Select` and `Combobox`, every popover anchored to a
+  field. So option text longer than the field WRAPS; it never widens the panel, and a paragraph-
+  length option cannot open a list wider than the drawer or column the field lives in. Give a
+  long description line a `numberOfLines` clamp so rows stay even and the list stays scannable.
 - **`InlineMemberSelect`** — a `MemberChip` at rest → member picker; the inline twin of
   `MemberSelect`; worked example: `tpl_record`'s "Sales owner" fact.
 - **`InlineDatePicker`** — `format="datetime"` for always-on time; `optionalTime` to let the user

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "20.0.0",
+  "version": "20.0.2",
   "type": "module",
   "exports": {
     "./vite": {
@@ -248,7 +248,9 @@
     "examples",
     "AGENTS.md",
     "MIGRATION.md",
-    "docs"
+    "docs",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
   ],
   "publishConfig": {
     "access": "public"
@@ -258,7 +260,7 @@
     "url": "https://github.com/lotics/lotics.git",
     "directory": "packages/ui"
   },
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
     "@lotics/docx": "^0.1.0",
     "@lotics/xlsx": "^0.1.0",

package/src/chip_group.tsx

@@ -51,7 +51,14 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
             onPress={() => onValueChange(option.value)}
             accessibilityRole="button"
             accessibilityLabel={`${accessibilityLabel}: ${option.label}`}
-            accessibilityState={{ selected: active }}
+            // A TOGGLE BUTTON, so which chip is active is announced. It has to
+            // be a raw `aria-pressed`, not `accessibilityState`: react-native-web
+            // maps only the states with a native counterpart, and it drops
+            // `selected` on a `button` role — which left the active chip
+            // distinguished by nothing but a 1px ring, invisible to a screen
+            // reader (`RadioPicker` and `SegmentedControl` pass raw `aria-checked`
+            // for the same reason).
+            aria-pressed={active}
             // The shared pill-surface contract (height/border/radius/white +
             // hover/press wash + the selected box-shadow ring); the chip only
             // adds its horizontal padding.

package/src/control_surface.ts

@@ -5,6 +5,13 @@ import { colors } from "./colors";
  *  buttons) aligns to it so a toolbar row reads as one band. */
 export const CONTROL_HEIGHT = 40;
 
+/** The narrowest a control may be and still be usable — below it, editors get
+ *  crushed and option text has nowhere to go. It is the threshold at which a
+ *  `DetailTable` gives up its side-by-side columns and stacks, and the floor
+ *  under a field popover's width, so "too narrow to use" means one thing across
+ *  the kit rather than a number re-picked per component. */
+export const MIN_CONTROL_WIDTH = 160;
+
 /** The system control radius — every interactive control surface (Button, the
  *  inputs/selects/pickers, SearchInput, MenuButton, Tabs, the SegmentedControl
  *  track, and ChipGroup/FilterChip/Chip via the surfaces below) wears it,

package/src/detail_row.tsx

@@ -1,5 +1,6 @@
 import { createContext, ReactNode, useContext, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { MIN_CONTROL_WIDTH } from "./control_surface";
 import { FieldAnnotationProps, FieldAnnotations, hasFieldAnnotation } from "./field_annotations";
 import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 import { getInputLineHeight } from "./text_utils";
@@ -16,10 +17,6 @@ interface DetailTableColumns {
 
 const DetailTableContext = createContext<DetailTableColumns | null>(null);
 
-/** The value cell must keep at least this width before the table gives up its
- *  side-by-side columns and stacks — below it, editors get crushed. */
-const MIN_VALUE_WIDTH = 160;
-
 /** THE kit's label column — ~18 characters, where real field names live. It is
  *  this table's default AND a `TaskList`'s, so a record's fields and a task's
  *  read as one language on a surface carrying both; that only holds while the
@@ -73,7 +70,7 @@ export interface DetailTableProps {
  * the switch is automatic.
  */
 export function DetailTable(props: DetailTableProps) {
-  const { labelWidth = DETAIL_LABEL_WIDTH, trailingWidth, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_VALUE_WIDTH, children, style } = props;
+  const { labelWidth = DETAIL_LABEL_WIDTH, trailingWidth, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_CONTROL_WIDTH, children, style } = props;
   const [width, setWidth] = useState<number | null>(null);
   const stacked =
     width != null && width < labelWidth + (trailingWidth ?? 0) + minValueWidth + 24;

package/src/popover.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import { ScrollView, View, ViewStyle, StyleProp } from "react-native";
 import { colors } from "./colors";
+import { MIN_CONTROL_WIDTH } from "./control_surface";
 import { IconButton } from "./icon_button";
 import { Portal } from "./portal";
 import { Divider } from "./divider";
@@ -641,10 +642,27 @@ export function PopoverContent(props: PopoverContentProps) {
                   display: "flex",
                   flexDirection: "column",
                 }),
+          // INHERIT means inherit — the width, not just a floor under it. The
+          // flag is set only by a popover anchored to a FIELD (Select,
+          // InlineSelect, Combobox), and a field's own width is the right width
+          // for the list of values that field can hold: option text longer than
+          // the field belongs on a second line, not on a wider panel.
+          //
+          // As a floor alone this LOOKED right, because with short options
+          // max-content lands on the trigger width anyway. It broke the moment
+          // an option was a sentence: the panel grew to the `maxWidth: 800` cap
+          // and then slid sideways to stay on screen, so a 371px field opened an
+          // 800px list starting 421px to its left, outside the drawer that owns
+          // the field.
+          //
+          // Floored at MIN_CONTROL_WIDTH so a genuinely narrow trigger — a
+          // `variant="cell"` select in a dense grid column — still opens a list
+          // wide enough to read, rather than inheriting a width nothing fits in.
           ...(inheritTriggerWidth &&
             !small &&
             triggerWidth > 0 && {
-              minWidth: triggerWidth,
+              width: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
+              maxWidth: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
             }),
         }}
         onClick={(e) => e.stopPropagation()}

package/src/agent_transform.test.ts

@@ -1,96 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { toSegments, anyRunning, lastRunningStep, type AgentUIPart, type AgentSegment, type AgentStep } from "./agent_transform";
-
-// RN-free logic test for the parts → timeline fold. The renderer (agent_run.tsx)
-// is verified visually in the gallery; the mapping — ai's 7-state tool machine to
-// the feed's 4 states, plus grouping — is unit-tested here. Fixtures are the ai-sdk
-// `dynamic-tool` part shape (contextually typed as `AgentUIPart`, so each concrete
-// `state` discriminates to the right member — no casts).
-
-function groups(parts: AgentUIPart[]): Extract<AgentSegment, { kind: "group" }>[] {
-  return toSegments(parts).filter((s): s is Extract<AgentSegment, { kind: "group" }> => s.kind === "group");
-}
-
-function onlyStep(parts: AgentUIPart[]): AgentStep {
-  const [group, ...rest] = groups(parts);
-  expect(rest).toHaveLength(0);
-  expect(group.steps).toHaveLength(1);
-  return group.steps[0];
-}
-
-describe("agent_transform — tool state mapping", () => {
-  it("input-streaming → running", () => {
-    expect(onlyStep([{ type: "dynamic-tool", toolName: "update_records", toolCallId: "t", state: "input-streaming", input: {} }]).status).toBe("running");
-  });
-
-  it("input-available → running", () => {
-    expect(onlyStep([{ type: "dynamic-tool", toolName: "update_records", toolCallId: "t", state: "input-available", input: {} }]).status).toBe("running");
-  });
-
-  it("approval-requested → awaiting (parked on a human decision)", () => {
-    const step = onlyStep([{ type: "dynamic-tool", toolName: "delete_records", toolCallId: "t", state: "approval-requested", input: { table: "Containers" }, approval: { id: "a1" } }]);
-    expect(step.status).toBe("awaiting");
-    // The input still rides along for the on-demand peek.
-    expect(step.input).toEqual({ table: "Containers" });
-  });
-
-  it("approval-responded → running (the decision is in, work resumes)", () => {
-    expect(onlyStep([{ type: "dynamic-tool", toolName: "delete_records", toolCallId: "t", state: "approval-responded", input: {}, approval: { id: "a1", approved: true } }]).status).toBe("running");
-  });
-
-  it("output-available → done, carrying the output", () => {
-    const step = onlyStep([{ type: "dynamic-tool", toolName: "query_records", toolCallId: "t", state: "output-available", input: { q: 1 }, output: { rows: 3 } }]);
-    expect(step.status).toBe("done");
-    expect(step.output).toEqual({ rows: 3 });
-  });
-
-  it("output-error → error, carrying errorText", () => {
-    const step = onlyStep([{ type: "dynamic-tool", toolName: "query_records", toolCallId: "t", state: "output-error", input: {}, errorText: "Unknown field" }]);
-    expect(step.status).toBe("error");
-    expect(step.errorText).toBe("Unknown field");
-  });
-
-  it("output-denied → error, with the denial reason as the error text", () => {
-    const step = onlyStep([{ type: "dynamic-tool", toolName: "delete_records", toolCallId: "t", state: "output-denied", input: {}, approval: { id: "a1", approved: false, reason: "Delete not permitted" } }]);
-    expect(step.status).toBe("error");
-    expect(step.errorText).toBe("Delete not permitted");
-  });
-
-  it("output-denied without a reason → error with no error text", () => {
-    const step = onlyStep([{ type: "dynamic-tool", toolName: "delete_records", toolCallId: "t", state: "output-denied", input: {}, approval: { id: "a1", approved: false } }]);
-    expect(step.status).toBe("error");
-    expect(step.errorText).toBeUndefined();
-  });
-});
-
-describe("agent_transform — streaming signals", () => {
-  it("anyRunning is true while a call runs, false once every call has settled", () => {
-    const running = toSegments([{ type: "dynamic-tool", toolName: "query_records", toolCallId: "t", state: "input-available", input: {} }]);
-    expect(anyRunning(running)).toBe(true);
-
-    const settled = toSegments([{ type: "dynamic-tool", toolName: "query_records", toolCallId: "t", state: "output-available", input: {}, output: {} }]);
-    expect(anyRunning(settled)).toBe(false);
-  });
-
-  it("an awaiting call is NOT running — it's parked, so the feed never pulses it", () => {
-    const parked = toSegments([{ type: "dynamic-tool", toolName: "delete_records", toolCallId: "t", state: "approval-requested", input: {}, approval: { id: "a1" } }]);
-    expect(anyRunning(parked)).toBe(false);
-    expect(lastRunningStep(parked)).toBeUndefined();
-  });
-});
-
-describe("agent_transform — grouping", () => {
-  it("folds consecutive tool parts into ONE group, split by prose", () => {
-    const parts: AgentUIPart[] = [
-      { type: "text", text: "First" },
-      { type: "dynamic-tool", toolName: "query_records", toolCallId: "a", state: "output-available", input: {}, output: {} },
-      { type: "dynamic-tool", toolName: "query_records", toolCallId: "b", state: "output-available", input: {}, output: {} },
-      { type: "text", text: "Then" },
-      { type: "dynamic-tool", toolName: "delete_records", toolCallId: "c", state: "approval-requested", input: {}, approval: { id: "a1" } },
-    ];
-    expect(toSegments(parts).map((s) => s.kind)).toEqual(["text", "group", "text", "group"]);
-    const [first, second] = groups(parts);
-    expect(first.steps.map((s) => s.id)).toEqual(["a", "b"]);
-    expect(second.steps.map((s) => s.status)).toEqual(["awaiting"]);
-  });
-});

package/src/calendar/layout.test.ts

@@ -1,103 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { layoutDayColumns, packEventLanes } from "./layout";
-import type { CalendarEvent } from "./types";
-
-const DAY = new Date(2026, 0, 15);
-const at = (h: number, m = 0) => new Date(2026, 0, 15, h, m);
-const ev = (id: string, sh: number, sm: number, eh: number, em: number): CalendarEvent => ({
-  id,
-  title: id,
-  start: at(sh, sm),
-  end: at(eh, em),
-});
-
-/** column/columns keyed by event id, for order-independent assertions. */
-function geom(events: CalendarEvent[]) {
-  return Object.fromEntries(
-    layoutDayColumns(DAY, events).map((c) => [c.event.id, { column: c.column, columns: c.columns }]),
-  );
-}
-
-describe("layoutDayColumns", () => {
-  it("returns nothing for an empty day", () => {
-    expect(layoutDayColumns(DAY, [])).toEqual([]);
-  });
-
-  it("stacks non-overlapping events in a single column", () => {
-    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 11, 0, 12, 0)]);
-    expect(g.a).toEqual({ column: 0, columns: 1 });
-    expect(g.b).toEqual({ column: 0, columns: 1 });
-  });
-
-  it("splits two fully overlapping events into two columns", () => {
-    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 9, 0, 10, 0)]);
-    expect(g.a.columns).toBe(2);
-    expect(g.b.columns).toBe(2);
-    expect(new Set([g.a.column, g.b.column])).toEqual(new Set([0, 1]));
-  });
-
-  it("gives three concurrent events three columns", () => {
-    const g = geom([ev("a", 9, 0, 12, 0), ev("b", 9, 0, 12, 0), ev("c", 9, 0, 12, 0)]);
-    expect(new Set([g.a.column, g.b.column, g.c.column])).toEqual(new Set([0, 1, 2]));
-    for (const k of ["a", "b", "c"]) expect(g[k].columns).toBe(3);
-  });
-
-  it("reuses a freed column within a transitive cluster (A→B→C chain)", () => {
-    // A 9-10, B 9:30-11 (overlaps A), C 10:30-12 (overlaps B, not A).
-    // One cluster via B; 2 columns; C reuses A's column once A ends.
-    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 9, 30, 11, 0), ev("c", 10, 30, 12, 0)]);
-    expect(g.a.columns).toBe(2);
-    expect(g.a.column).toBe(0);
-    expect(g.b.column).toBe(1);
-    expect(g.c.column).toBe(0); // freed by A
-  });
-
-  it("treats time-separated events as independent clusters", () => {
-    const g = geom([ev("morn1", 9, 0, 10, 0), ev("morn2", 9, 0, 10, 0), ev("aft", 14, 0, 15, 0)]);
-    expect(g.morn1.columns).toBe(2);
-    expect(g.morn2.columns).toBe(2);
-    expect(g.aft).toEqual({ column: 0, columns: 1 }); // own cluster
-  });
-
-  it("positions and floors height; clamps to the day window", () => {
-    const [c] = layoutDayColumns(DAY, [ev("x", 9, 0, 9, 5)]);
-    expect(c.topMinutes).toBe(540); // 9:00
-    expect(c.heightMinutes).toBeGreaterThanOrEqual(20); // 5-min event floored
-    const spill = layoutDayColumns(DAY, [
-      { id: "y", title: "y", start: at(23, 0), end: new Date(2026, 0, 16, 2, 0) },
-    ])[0];
-    expect(spill.topMinutes).toBe(1380); // 23:00
-    expect(spill.topMinutes + spill.heightMinutes).toBeLessThanOrEqual(1440); // clamped
-  });
-});
-
-describe("packEventLanes", () => {
-  const WEEK = new Date(2026, 0, 12); // Mon
-  const allDay = (id: string, startDay: number, endDay: number): CalendarEvent => ({
-    id,
-    title: id,
-    start: new Date(2026, 0, 12 + startDay),
-    end: new Date(2026, 0, 12 + endDay),
-    allDay: true,
-  });
-
-  it("places non-overlapping spans in one lane", () => {
-    const { bars, lanes } = packEventLanes([allDay("a", 0, 1), allDay("b", 3, 4)], WEEK, 7);
-    expect(lanes).toBe(1);
-    expect(bars.find((b) => b.event.id === "a")).toMatchObject({ startCol: 0, span: 2, lane: 0 });
-    expect(bars.find((b) => b.event.id === "b")).toMatchObject({ startCol: 3, span: 2, lane: 0 });
-  });
-
-  it("stacks overlapping multi-day spans into separate lanes", () => {
-    const { lanes } = packEventLanes([allDay("a", 0, 3), allDay("b", 2, 5)], WEEK, 7);
-    expect(lanes).toBe(2);
-  });
-
-  it("clamps a span that starts before the window and filters out-of-range", () => {
-    const before: CalendarEvent = { id: "x", title: "x", start: new Date(2026, 0, 9), end: new Date(2026, 0, 13), allDay: true };
-    const after = allDay("y", 9, 10); // entirely after a 7-day window
-    const { bars } = packEventLanes([before, after], WEEK, 7);
-    expect(bars).toHaveLength(1);
-    expect(bars[0]).toMatchObject({ event: { id: "x" }, startCol: 0, span: 2 }); // clamped to days 0..1
-  });
-});

package/src/colors.test.ts

@@ -1,45 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { isColorName, asColorName } from "./colors";
-
-describe("isColorName", () => {
-  it("accepts palette family names", () => {
-    expect(isColorName("blue")).toBe(true);
-    expect(isColorName("emerald")).toBe(true);
-    expect(isColorName("zinc")).toBe(true);
-  });
-
-  it("rejects role keys and scalar colors (not selectable families)", () => {
-    expect(isColorName("border")).toBe(false);
-    expect(isColorName("border_shadow")).toBe(false);
-    expect(isColorName("background")).toBe(false);
-    expect(isColorName("shadow")).toBe(false);
-    expect(isColorName("black")).toBe(false);
-    expect(isColorName("white")).toBe(false);
-  });
-
-  it("rejects unknown tokens and non-strings", () => {
-    expect(isColorName("chartreuse")).toBe(false);
-    expect(isColorName("")).toBe(false);
-    expect(isColorName(undefined)).toBe(false);
-    expect(isColorName(null)).toBe(false);
-    expect(isColorName(42)).toBe(false);
-  });
-});
-
-describe("asColorName", () => {
-  it("passes a valid family through", () => {
-    expect(asColorName("purple")).toBe("purple");
-  });
-
-  it("degrades an unknown/absent token to the neutral default", () => {
-    // The graceful-degradation contract: a select option whose color token this
-    // build doesn't recognize, or none at all, renders neutral rather than break.
-    expect(asColorName("chartreuse")).toBe("zinc");
-    expect(asColorName(undefined)).toBe("zinc");
-    expect(asColorName(null)).toBe("zinc");
-  });
-
-  it("honors a custom fallback", () => {
-    expect(asColorName(undefined, "slate")).toBe("slate");
-  });
-});

package/src/date_filter_presets.test.ts

@@ -1,62 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { getPresetValue, PRESET_IDS, type PresetId } from "./date_filter_presets";
-
-// Wednesday, 10 June 2026, 14:30 — a fixed clock so every range is deterministic.
-const NOW = new Date(2026, 5, 10, 14, 30, 0, 0);
-
-function ymd(d: Date | null): string {
-  if (!d) return "null";
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-}
-
-describe("getPresetValue", () => {
-  it("today spans the start to end of the current day", () => {
-    const v = getPresetValue("today", NOW)!;
-    expect(ymd(v.start.date)).toBe("2026-06-10");
-    expect(ymd(v.end.date)).toBe("2026-06-10");
-    expect(v.start.date!.getHours()).toBe(0);
-    expect(v.start.date!.getMilliseconds()).toBe(0);
-    expect(v.end.date!.getHours()).toBe(23);
-    expect(v.end.date!.getMinutes()).toBe(59);
-    expect(v.end.date!.getMilliseconds()).toBe(999);
-  });
-
-  it("yesterday and tomorrow shift by one day", () => {
-    expect(ymd(getPresetValue("yesterday", NOW)!.start.date)).toBe("2026-06-09");
-    expect(ymd(getPresetValue("yesterday", NOW)!.end.date)).toBe("2026-06-09");
-    expect(ymd(getPresetValue("tomorrow", NOW)!.start.date)).toBe("2026-06-11");
-    expect(ymd(getPresetValue("tomorrow", NOW)!.end.date)).toBe("2026-06-11");
-  });
-
-  it("this_week runs Monday → Sunday around now", () => {
-    const v = getPresetValue("this_week", NOW)!;
-    expect(ymd(v.start.date)).toBe("2026-06-08"); // Monday
-    expect(v.start.date!.getDay()).toBe(1);
-    expect(ymd(v.end.date)).toBe("2026-06-14"); // Sunday
-    expect(v.end.date!.getDay()).toBe(0);
-  });
-
-  it("this_month covers the whole calendar month", () => {
-    const v = getPresetValue("this_month", NOW)!;
-    expect(ymd(v.start.date)).toBe("2026-06-01");
-    expect(ymd(v.end.date)).toBe("2026-06-30");
-  });
-
-  it("last_month covers the previous calendar month", () => {
-    const v = getPresetValue("last_month", NOW)!;
-    expect(ymd(v.start.date)).toBe("2026-05-01");
-    expect(ymd(v.end.date)).toBe("2026-05-31");
-  });
-
-  it("custom carries no range", () => {
-    expect(getPresetValue("custom", NOW)).toBeNull();
-  });
-
-  it("every preset id resolves (only custom is null)", () => {
-    for (const id of PRESET_IDS) {
-      const v = getPresetValue(id as PresetId, NOW);
-      if (id === "custom") expect(v).toBeNull();
-      else expect(v).not.toBeNull();
-    }
-  });
-});