@lotics/ui 7.10.0 → 7.12.0

package/AGENTS.md

@@ -866,8 +866,8 @@ radio_picker · counter · range_slider · date_picker · date_range_filter_fiel
 inline_text_input · inline_number_input · inline_select · inline_member_select · inline_date_picker ·
 inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
 `InlineEditView`; `InlineSelect`/`InlineMemberSelect` render the resting value like its option — `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not just text) ·
-inline_static (InlineStatic — a READ-ONLY value matching the Inline* box metrics EXACTLY (height, padding, 1px transparent border) so a non-editable field — a computed total, a system ID, a synced/locked value — aligns pixel-for-pixel in the same column; non-interactive, NOT a disabled input; `muted`/`tabular`/`align="right"` for a number column) ·
-list · list_item · menu_button · menu_list_item · detail_row (DetailRow — label+value row for drawer/peek detail; optional `trailing` slot renders a right-side action/badge/unit after the value) · danger_zone (DangerZone — the destructive section: a soft danger-tinted frame (`tint`/`solid`, never raw hex) + a danger heading + a description + a destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a record/settings surface) · pressable_row ·
+inline_static (InlineStatic — a READ-ONLY value matching the Inline* box metrics EXACTLY (height, padding, 1px transparent border) so a non-editable field — a computed total, a system ID, a synced/locked value — aligns pixel-for-pixel in the same column; non-interactive, NOT a disabled input; `muted`/`tabular`/`align="right"` for a number column, `weight="medium"` to emphasise a total among plain rows) ·
+list · list_item · menu_button · menu_list_item · detail_row (DetailRow — label+value row for drawer/peek detail; in FORM mode (`labelWidth` set) the value column FILLS the row so a stack of inline editors all span the same width + none jumps wider on edit; optional `trailing` slot renders a right-side action/badge/unit after the value) · danger_zone (DangerZone — the destructive section: a soft danger-tinted frame (`tint`/`solid`, never raw hex) + a danger heading + a description + a destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a record/settings surface) · pressable_row ·
 check_circle (CheckCircle — the completion ring: an empty ring that springs to a filled check when done, distinct from the square checkbox; the task/to-do/checklist toggle. Compose task rows directly, no Task component) · action_menu ·
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.10.0",
+  "version": "7.12.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/detail_row.tsx

@@ -9,9 +9,8 @@ export interface DetailRowProps {
   children: ReactNode;
   /** An optional right-side slot, rendered as the LAST child of the row (after
    *  `children`) — a small action `Button`, a status `Badge`, a unit label, an
-   *  `IconButton`. For it to sit at the right edge, wrap the value/editor in a
-   *  `flex:1` View so the value takes the slack and the trailing pins right (the
-   *  inline-record templates do this). */
+   *  `IconButton`. In form mode (`labelWidth` set) the value column already fills
+   *  the row, so the trailing pins to the right edge automatically. */
   trailing?: ReactNode;
   /** Fixed label-column width (px) to align labels in a left column — for a peek
    *  or form-like stack. Omit for a spread row: the label takes the slack and the
@@ -26,17 +25,19 @@ export interface DetailRowProps {
 /**
  * One label + value line for a drawer / peek detail view — NOT a list row (that's
  * `PressableRow` / `TableRow`). Spread by default (muted label left, value pushed
- * to the right edge); pass `labelWidth` to align labels in a fixed left column
- * with the values flowing immediately after instead.
+ * to the right edge); pass `labelWidth` to align labels in a fixed left column —
+ * the value column then FILLS the rest of the row, so a stack of inline editors
+ * all span the same width (none jumps wider on edit).
  */
 export function DetailRow(props: DetailRowProps) {
   const { label, children, trailing, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  const form = labelWidth != null;
   return (
     <View style={[styles.row, { minHeight }]}>
-      <Text size={labelSize} color="muted" style={labelWidth != null ? { width: labelWidth } : styles.flexLabel}>
+      <Text size={labelSize} color="muted" style={form ? { width: labelWidth } : styles.flexLabel}>
         {label}
       </Text>
-      {children}
+      {form ? <View style={styles.value}>{children}</View> : children}
       {trailing != null ? trailing : null}
     </View>
   );
@@ -49,4 +50,10 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   flexLabel: { flex: 1 },
+  // Form mode (labelWidth set): the value column FILLS the row so every inline
+  // editor spans the SAME width — and none jumps wider when it swaps to the
+  // (flex:1) edit control. A stretch column, so an InlineEditView / InlineStatic
+  // child fills it edge-to-edge. A status Badge or action is NOT a value — pass
+  // it as `trailing` (pins right); one placed here would stretch full-width.
+  value: { flex: 1 },
 });

package/src/file_thumbnail.tsx

@@ -50,7 +50,7 @@ export interface DisplayFile {
   url: string;
   /** Optional thumbnail URL for images */
   thumbnailUrl?: string;
-  /** Preview URL for legacy Excel files (.xls converted to .xlsx server-side) */
+  /** Optional local preview URL (e.g. an object URL for a file still uploading). */
   previewUrl?: string;
 }
 

package/src/inline_static.tsx

@@ -16,6 +16,9 @@ export interface InlineStaticProps {
   tabular?: boolean;
   /** Horizontal alignment — `right` for a number column. Default `left`. */
   align?: "left" | "right";
+  /** Value weight — `medium` to emphasise a total or headline figure among plain
+   *  rows. Default `regular` (reads as an ordinary value, not a heading). */
+  weight?: "regular" | "medium";
 }
 
 /**
@@ -29,7 +32,7 @@ export interface InlineStaticProps {
  * slot, so the value takes the slack and the trailing pins right.
  */
 export function InlineStatic(props: InlineStaticProps) {
-  const { value, placeholder, muted, tabular, align = "left" } = props;
+  const { value, placeholder, muted, tabular, align = "left", weight } = props;
   const isEmpty = value.length === 0;
   const display = isEmpty ? (placeholder ?? "—") : value;
   return (
@@ -38,6 +41,7 @@ export function InlineStatic(props: InlineStaticProps) {
         numberOfLines={1}
         tabular={tabular}
         align={align}
+        weight={weight}
         color={muted ? "muted" : "default"}
         style={[inlineValueTextStyle, isEmpty ? styles.placeholder : null]}
       >

package/src/mime.ts

@@ -21,8 +21,6 @@ const EXCEL_MIME_TYPES = [
   "application/vnd.ms-excel",
 ];
 
-const LEGACY_EXCEL_MIME_TYPES = ["application/vnd.ms-excel", "application/wps-office.xls"];
-
 const DOCX_MIME_TYPES = [
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
   "application/wps-office.docx",
@@ -36,11 +34,6 @@ export function isExcelMimeType(mimeType: string): boolean {
   return EXCEL_MIME_TYPES.includes(mimeType.toLowerCase());
 }
 
-/** Legacy .xls (BIFF) — not parseable in-app; excluded from previewable. */
-export function isLegacyExcelMimeType(mimeType: string): boolean {
-  return LEGACY_EXCEL_MIME_TYPES.includes(mimeType.toLowerCase());
-}
-
 export function isCsvMimeType(mimeType: string): boolean {
   const mt = mimeType.toLowerCase();
   return mt === "text/csv" || mt === "text/tab-separated-values";
@@ -50,10 +43,10 @@ export function isDocxMimeType(mimeType: string): boolean {
   return DOCX_MIME_TYPES.includes(mimeType.toLowerCase());
 }
 
-/** PDF, modern Excel (.xlsx), Word (.docx), or CSV — types FilePreview renders inline. */
+/** PDF, Excel (.xlsx + legacy .xls), Word (.docx), or CSV — types FilePreview renders inline. */
 export function isPreviewableMimeType(mimeType: string): boolean {
   return (
-    (isExcelMimeType(mimeType) && !isLegacyExcelMimeType(mimeType)) ||
+    isExcelMimeType(mimeType) ||
     isCsvMimeType(mimeType) ||
     isPdfMimeType(mimeType) ||
     isDocxMimeType(mimeType)