@lotics/ui 29.2.0 → 30.0.0

package/src/file_intake.ts

@@ -13,11 +13,13 @@
 
 import type { ReactNode } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
+import { resolveMimeType } from "./mime";
 
 /** The filter every intake path applies to what arrived. */
 export interface FileIntakeFilter {
   /** Native `accept` filter (e.g. `"application/pdf,image/*"`) — matched against
-   *  the file's MIME type, or its extension for a `.ext` pattern. */
+   *  the file's MIME type (falling back to what its extension says when the file
+   *  declares none), or against its filename for a `.ext` pattern. */
   accept?: string;
   /** Keep more than one file. Default true. */
   multiple?: boolean;
@@ -79,15 +81,28 @@ export interface FileDropTargetProps extends FileIntakeFilter {
  * Does a file pass a native `accept` list? Each comma-separated pattern is an
  * extension (`.pdf`), a wildcard type (`image/*`) or an exact MIME
  * (`application/pdf`); an empty/absent list accepts everything.
+ *
+ * A file whose declared type says NOTHING is judged by its extension instead.
+ * The OS clipboard is the case that forces this: copy a file in
+ * Finder/Explorer and paste it, and the browser hands over real bytes and a
+ * real filename while declaring `""` — or, just as often,
+ * `application/octet-stream`, the same non-answer wearing the shape of one.
+ * Reading either as a MIME mismatch asserts "this is not a PDF" from data that
+ * never said so, and the file is dropped; because a paste carrying nothing
+ * acceptable is deliberately left alone, that drop is invisible.
+ *
+ * `resolveMimeType` owns which declarations count as uninformative, so this
+ * matches on the same type the SERVER will store for the file.
  */
 export function matchesAccept(file: File, accept: string | undefined): boolean {
   if (!accept) return true;
   const patterns = accept.split(",").map((p) => p.trim().toLowerCase()).filter(Boolean);
   if (patterns.length === 0) return true;
-  const mime = file.type.toLowerCase();
   const name = file.name.toLowerCase();
+  const mime = resolveMimeType(file.type, name);
   return patterns.some((p) => {
     if (p.startsWith(".")) return name.endsWith(p);
+    if (!mime) return false;
     if (p.endsWith("/*")) return mime.startsWith(p.slice(0, -1));
     return mime === p;
   });

package/src/files_editor.tsx

@@ -351,7 +351,7 @@ export function FilesEditorRemove() {
   return (
     <Button
       title={labels.delete}
-      color="danger-secondary"
+      color="danger"
       disabled={selected.length === 0}
       onPress={() => confirmRemove(selected, () => { for (const f of selected) onRemove(f.id); exit(); })}
     />

package/src/floating_action_bar.tsx

@@ -33,9 +33,20 @@ export function FloatingActionBar(props: FloatingActionBarProps) {
   return (
     <View pointerEvents="box-none" style={styles.wrap}>
       <Card style={styles.bar}>
-        <Text size="sm" weight="semibold" tabular>{`${count} ${label}`}</Text>
-        <Button title={clearLabel} color="muted" onPress={onClear} />
-        {children}
+        {/* TWO GROUPS, not one row of peers. The count and Clear are the bar's
+            own STATE — what is picked, and how to un-pick it; they act on the
+            selection, not on the records. `children` are the ACTS. A single gap
+            across all of them made four buttons read as four equal things, and
+            the emphasis ladder between them (muted / secondary / primary, which
+            encodes destructive vs benign vs promoted) then looked like
+            arbitrary variety rather than a ladder. Grouping states the kind
+            difference; the ladder is then read WITHIN the acts, where it means
+            something. */}
+        <View style={styles.state}>
+          <Text size="sm" weight="semibold" tabular>{`${count} ${label}`}</Text>
+          <Button title={clearLabel} color="muted" onPress={onClear} />
+        </View>
+        <View style={styles.acts}>{children}</View>
       </Card>
     </View>
   );
@@ -48,13 +59,31 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     alignItems: "center",
+    // Keeps the bar off the screen edges at any width — and, with the bar's
+    // `maxWidth`, is what bounds it to the viewport on a phone.
+    paddingHorizontal: 16,
     zIndex: 20,
   },
   bar: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    justifyContent: "center",
+    // A count plus an escape plus three verbs is ~520px of content — wider than
+    // a phone. Unbounded it simply hung off both edges, taking the promoted act
+    // with it, and no host could fix that without re-authoring the bar. So it
+    // WRAPS, and the grouping decides where: `state` and `acts` are each a
+    // nowrap row, so the only break available is the boundary between them —
+    // the line splits exactly where the meaning does (what is picked / what to
+    // do with it), never mid-ladder with Download orphaned from Use AI.
+    flexWrap: "wrap",
+    maxWidth: "100%",
+    // The biggest boundary in the bar — state | acts — gets the most air. The
+    // two groups below sit on the kit's action gap. Doubles as the row gap once
+    // wrapped, which is the same boundary seen vertically.
+    gap: 20,
     paddingVertical: 10,
     paddingHorizontal: 16,
   },
+  state: { flexDirection: "row", alignItems: "center", gap: 8 },
+  acts: { flexDirection: "row", alignItems: "center", gap: 8 },
 });

package/src/locale.tsx

@@ -193,6 +193,7 @@ export interface LoticsLocale {
     output: string;
     awaiting: string;
     retry: string;
+    stop: string;
     tools: Record<string, string>;
     steps: (n: number) => string;
   };
@@ -341,6 +342,7 @@ export const en: LoticsLocale = {
     output: "Output",
     awaiting: "Awaiting",
     retry: "Retry",
+    stop: "Stop",
     tools: {
       query_records: "Searching records",
       get_record: "Reading a record",
@@ -493,6 +495,7 @@ export const vi: LoticsLocale = {
     output: "Kết quả",
     awaiting: "Chờ duyệt",
     retry: "Thử lại",
+    stop: "Dừng",
     tools: {
       query_records: "Đang tìm dữ liệu",
       get_record: "Đang đọc một bản ghi",

package/src/mime.ts

@@ -52,3 +52,79 @@ export function isPreviewableMimeType(mimeType: string): boolean {
     isDocxMimeType(mimeType)
   );
 }
+
+/** A MIME type without its parameters (`text/csv; charset=utf-8` → `text/csv`). */
+function normalizeMimeType(mimeType: string): string {
+  return mimeType.split(";")[0]!.trim().toLowerCase();
+}
+
+/**
+ * Types that carry no information — a sender that declined to classify the
+ * bytes. The empty string is only the most obvious one: an OS clipboard or drag
+ * routinely hands a file over as `application/octet-stream` instead, which is
+ * the same statement made in a way that LOOKS like an answer.
+ */
+const GENERIC_MIME_TYPES: ReadonlySet<string> = new Set([
+  "",
+  "application/octet-stream",
+  "binary/octet-stream",
+  "application/binary",
+  "application/unknown",
+]);
+
+/**
+ * Extension → MIME, for the document and image formats an intake surface names.
+ * A `Map`, not an object literal, so a file named `x.constructor` looks up a
+ * miss rather than `Object.prototype`'s member.
+ */
+const MIME_BY_EXTENSION: ReadonlyMap<string, string> = new Map([
+  ["pdf", "application/pdf"],
+  ["png", "image/png"],
+  ["jpg", "image/jpeg"],
+  ["jpeg", "image/jpeg"],
+  ["gif", "image/gif"],
+  ["webp", "image/webp"],
+  ["avif", "image/avif"],
+  ["bmp", "image/bmp"],
+  ["svg", "image/svg+xml"],
+  ["tif", "image/tiff"],
+  ["tiff", "image/tiff"],
+  ["heic", "image/heic"],
+  ["heif", "image/heif"],
+  ["csv", "text/csv"],
+  ["tsv", "text/tab-separated-values"],
+  ["txt", "text/plain"],
+  ["xml", "application/xml"],
+  ["json", "application/json"],
+  ["zip", "application/zip"],
+  ["xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
+  ["xls", "application/vnd.ms-excel"],
+  ["docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
+  ["doc", "application/msword"],
+]);
+
+/** What a filename's extension says the file is, or `""` when it says nothing. */
+function mimeTypeFromFileName(name: string): string {
+  const dot = name.lastIndexOf(".");
+  // `dot <= 0` also rejects a dotfile (`.pdf` is a NAME, not an extension);
+  // `length - 1` rejects a trailing dot.
+  if (dot <= 0 || dot === name.length - 1) return "";
+  return MIME_BY_EXTENSION.get(name.slice(dot + 1).toLowerCase()) ?? "";
+}
+
+/**
+ * The type to TREAT content as, given what its sender declared and what it is
+ * called. An honestly-declared type is never second-guessed — only an
+ * uninformative one is resolved, and only from the filename, falling back to
+ * the declaration when the extension is unrecognized too.
+ *
+ * Mirrors `resolveMimeType` in `@lotics/shared/file_type`, which is what the
+ * server stores. The kit cannot import it (`primitives_purity.test.ts` keeps
+ * `src/` free of `@lotics/shared`), so `mime_parity.test.ts` asserts the two
+ * agree instead of trusting that they will.
+ */
+export function resolveMimeType(declaredMimeType: string, filename: string): string {
+  const declared = normalizeMimeType(declaredMimeType);
+  if (!GENERIC_MIME_TYPES.has(declared)) return declared;
+  return mimeTypeFromFileName(filename) || declared;
+}

package/src/pressable_row.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, Ref, useCallback, useState } from "react";
+import { ROW_WASH_BLEED } from "./control_surface";
 import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
 import { pressSelectedText } from "./press_selection";
@@ -108,23 +109,26 @@ const styles = StyleSheet.create({
     // the text it had no business covering.
     ...({ cursor: "pointer", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
   },
-  // THE register row — FULL-WIDTH rounded highlight. The hover/selected wash
-  // spans the entire row (so the pressable area === the row, never narrower than
-  // the dividers around it) and rounds (radius 10); content sits on the 20px
-  // column gutter so a Table header + cells align. The Divider between rows (the
-  // Table renders it) is the resting separation; this wash is the hover state.
+  // THE register row — FULL-WIDTH rounded highlight that BLEEDS past the content
+  // (`ROW_WASH_BLEED`, net-zero margin+padding), so the row's content sits on the
+  // container's own edge and the wash still has breathing room. It used to pad 20
+  // WITHOUT the negative margin, which put every table's first column 20px right
+  // of the headings above it and made `SummaryLine` call sites hand-pad 20 to
+  // catch up. `inset` below has always done it correctly; this is the same rule.
   register: {
     borderRadius: 10,
-    paddingHorizontal: 20,
+    paddingHorizontal: ROW_WASH_BLEED,
+    marginHorizontal: -ROW_WASH_BLEED,
   },
   // Square, full-bleed — lines up with the Dividers between register rows. Legacy.
   bleed: {
-    paddingHorizontal: 20,
+    paddingHorizontal: ROW_WASH_BLEED,
+    marginHorizontal: -ROW_WASH_BLEED,
   },
   // Rounded, pulled in from the edge — matches the Accordion's inset rows.
   inset: {
     borderRadius: 8,
-    paddingHorizontal: 8,
-    marginHorizontal: -8,
+    paddingHorizontal: ROW_WASH_BLEED,
+    marginHorizontal: -ROW_WASH_BLEED,
   },
 });

package/src/table_fit.ts

@@ -30,10 +30,22 @@ export interface TableFitColumn {
 /** Gap between the header band's / a row's children — `table.tsx` styles consume
  *  this, so the fit math and the rendered geometry can't drift. */
 export const COLUMN_GAP = 14;
-/** The register's horizontal gutter — mirrors `PressableRow`'s register variant
- *  (`paddingHorizontal: 20`), the one geometry this file models but doesn't own.
- *  `table.tsx` consumes it for the header band and static rows. */
-export const ROW_GUTTER = 20;
+/**
+ * The register's CONTENT gutter — zero, because the washed row bleeds instead.
+ *
+ * It was 20, mirroring `PressableRow`'s register variant, and every unwashed
+ * part of a table (the header band, static rows, an expanded detail) padded by
+ * the same 20 purely to line up with the washed row's inset content. That put a
+ * table's first column 20px right of the section heading above it with nothing
+ * visible in the gap. The wash now grows outward (`ROW_WASH_BLEED`) rather than
+ * pushing content in, so every part of a table sits on its container's edge and
+ * the five `table.tsx` sites that read this constant follow automatically.
+ *
+ * Kept as a named constant rather than deleted: the header band, the rows and
+ * the fit math must agree, and a literal repeated at five sites is how they
+ * stopped agreeing before.
+ */
+export const ROW_GUTTER = 0;
 const ROW_H_PADDING = ROW_GUTTER * 2;
 /** Fit-math width a flexible column needs to stay usable — below this the flex
  *  column is crushed to ellipsis soup, so it counts as this wide when deciding