@lotics/ui 18.1.0 → 19.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "18.1.0",
+  "version": "19.0.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/detail_row.tsx

@@ -19,6 +19,12 @@ const DetailTableContext = createContext<DetailTableColumns | null>(null);
  *  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 the floor a `TaskSubRow`'s label sizes from, so a
+ *  record's fields and a task's read as one language on a surface carrying
+ *  both; that only holds while the two are ONE number. */
+export const DETAIL_LABEL_WIDTH = 130;
+
 export interface DetailTableProps {
   /** Label column width (px). Default 130. */
   labelWidth?: number;
@@ -64,7 +70,7 @@ export interface DetailTableProps {
  * the switch is automatic.
  */
 export function DetailTable(props: DetailTableProps) {
-  const { labelWidth = 130, trailingWidth, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_VALUE_WIDTH, children, style } = props;
+  const { labelWidth = DETAIL_LABEL_WIDTH, trailingWidth, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_VALUE_WIDTH, children, style } = props;
   const [width, setWidth] = useState<number | null>(null);
   const stacked =
     width != null && width < labelWidth + (trailingWidth ?? 0) + minValueWidth + 24;

package/src/file_grid.tsx

@@ -59,6 +59,10 @@ export interface FileGridProps {
    *  e.g. open the gallery at the first hidden file. */
   onOverflowPress?: (hiddenCount: number) => void;
   style?: ViewStyle;
+  /** Render every tile INERT — no press, no `button` role, no tab stop. Use it
+   *  when something ABOVE the grid owns the press (a table cell, a popover
+   *  trigger, a pressable row): a tile that keeps its button nests one button
+   *  inside another. */
   disablePress?: boolean;
   partialRowAlign?: "start" | "end";
   selectedIds?: ReadonlySet<string>;
@@ -162,6 +166,7 @@ export function FileGrid(props: FileGridProps) {
             file={item.file}
             size={size}
             onPress={disablePress ? undefined : () => handleFilePress(item.file)}
+            disablePress={disablePress}
             onRemove={onDisplayRemove ? () => onDisplayRemove(item.removeId) : undefined}
             selected={selectedIds?.has(item.file.id)}
           />

package/src/file_thumbnail.tsx

@@ -66,6 +66,12 @@ interface FileThumbnailProps {
   size?: number;
   /** Called when thumbnail is pressed */
   onPress?: () => void;
+  /** Render the tile INERT — no press handler, no `button` role, no tab stop.
+   *  Without this an `onPress`-less tile still falls back to opening the file,
+   *  so it stays a `<button>`: dropping a strip into a pressable row (a table
+   *  cell, a `PressableRow`) then nests a button in a button. Set it whenever
+   *  something ABOVE the tile owns the press. */
+  disablePress?: boolean;
   /** Called when thumbnail is long-pressed */
   onLongPress?: () => void;
   /** Called when the completed file is removed */
@@ -87,8 +93,15 @@ interface FileThumbnailProps {
  * Works with any file source via DisplayFile interface.
  */
 export function FileThumbnail(props: FileThumbnailProps) {
-  const { file, size, onPress, onLongPress, onRemove, selected, uploading, isTemplate } = props;
+  const { file, size, onPress, onLongPress, onRemove, selected, uploading, isTemplate, disablePress } = props;
   const accessibilityLabel = props.accessibilityLabel ?? file.filename;
+  // A tile with no `onPress` still OPENS the file — a useful default for a bare
+  // thumbnail in a list or a gallery. But a caller that said `disablePress`
+  // means it: inventing a handler there renders a <button>, and the one place a
+  // compact strip belongs is a table cell, which is itself pressable. Nesting a
+  // button in a button is invalid HTML and two tab stops for one action.
+  const press = disablePress ? undefined : onPress;
+  const pressOrOpen = disablePress ? undefined : (onPress ?? (() => Linking.openURL(file.url)));
 
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
@@ -96,7 +109,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
   if (isImageMimeType(file.mimeType)) {
     return (
       <View style={rootStyle}>
-        <ImageThumbnail file={file} size={size} accessibilityLabel={accessibilityLabel} onPress={onPress} onLongPress={onLongPress} />
+        <ImageThumbnail file={file} size={size} accessibilityLabel={accessibilityLabel} onPress={press} onLongPress={onLongPress} />
         {uploading && <UploadingOverlay size={size} />}
         {onRemove && <RemoveButton onPress={onRemove} />}
         {selected !== undefined && <SelectionOverlay selected={selected} />}
@@ -114,7 +127,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           size={size}
           isTemplate={isTemplate}
           accessibilityLabel={accessibilityLabel}
-          onPress={onPress ?? (() => Linking.openURL(file.url))}
+          onPress={pressOrOpen}
           onLongPress={onLongPress}
         />
         {uploading && <UploadingOverlay size={size} />}
@@ -132,7 +145,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           icon={mediaIcon}
           size={size}
           accessibilityLabel={accessibilityLabel}
-          onPress={onPress ?? (() => Linking.openURL(file.url))}
+          onPress={pressOrOpen}
           onLongPress={onLongPress}
         />
       ) : (
@@ -142,7 +155,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           size={size}
           isTemplate={isTemplate}
           accessibilityLabel={accessibilityLabel}
-          onPress={onPress ?? (() => Linking.openURL(file.url))}
+          onPress={pressOrOpen}
           onLongPress={onLongPress}
         />
       )}
@@ -206,7 +219,8 @@ export function DocumentBadge(props: DocumentBadgeProps) {
     <Pressable
       onPress={onPress}
       onLongPress={onLongPress}
-      accessibilityRole="button"
+      accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1}
       accessibilityLabel={accessibilityLabel ?? resolveMime(mimeType).label}
       {...focusProps}
       style={focusVisible ? { boxShadow: FOCUS_RING, borderRadius: 6 } : undefined}
@@ -262,7 +276,8 @@ export function DocumentCard(props: DocumentCardProps) {
       ]}
       onPress={onPress}
       onLongPress={onLongPress}
-      accessibilityRole="button"
+      accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1}
       accessibilityLabel={a11yLabel}
       {...focusProps}
     >
@@ -313,7 +328,8 @@ export function MediaCard(props: MediaCardProps) {
         style={({ pressed }) => [styles.mediaCardCompact, sizeStyle, { backgroundColor: color }, pressed && styles.pressedDim, focusVisible && { boxShadow: FOCUS_RING }]}
         onPress={onPress}
         onLongPress={onLongPress}
-        accessibilityRole="button"
+        accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1}
         accessibilityLabel={a11yLabel}
         {...focusProps}
       >
@@ -327,7 +343,8 @@ export function MediaCard(props: MediaCardProps) {
   const backdrop = iconSize + 20;
 
   return (
-    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} accessibilityRole="button" accessibilityLabel={a11yLabel} {...focusProps}>
+    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1} accessibilityLabel={a11yLabel} {...focusProps}>
       {(state) => (
         <>
           <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
@@ -381,7 +398,7 @@ function ImageThumbnail(props: ImageThumbnailProps) {
       : { width: "100%" as const, height: "100%" as const };
 
   return (
-    <Pressable onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : "image"} accessibilityLabel={a11yLabel} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
+    <Pressable onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : "image"} tabIndex={onPress ? undefined : -1} accessibilityLabel={a11yLabel} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
       {(state) => (
         <>
           <Image

package/src/file_thumbnail_grid.tsx

@@ -188,6 +188,10 @@ export function FileThumbnailGrid(props: FileThumbnailGridProps) {
           file={file}
           size={size}
           onPress={disablePress || !onFilePress ? undefined : () => onFilePress(file)}
+          // Withholding `onPress` is NOT enough: a tile with none falls back to
+          // opening the file, so it stays a button and a tab stop. The prop has
+          // to reach the tile that honors it.
+          disablePress={disablePress}
           onRemove={onRemove ? () => onRemove(file.id) : undefined}
           selected={selectedIds?.has(file.id)}
         />

package/src/linked_record_box.tsx

@@ -5,6 +5,7 @@ import { PressDoor } from "./press_door";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { colors } from "./colors";
+import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 
 /** One reference fact. `V` is the value the variant admits — text under a door, any node without one. */
 interface LinkedRecordFact<V = ReactNode> {
@@ -94,18 +95,30 @@ export function LinkedRecordBox(props: LinkedRecordBoxProps) {
       </View>
       {facts.length > 0 ? (
         <View style={{ gap: 6 }}>
-          {facts.map((f) => (
-            <View key={f.label} style={styles.fact}>
-              <Text size="sm" color="muted" style={{ width: factLabelWidth }}>{f.label}</Text>
-              {typeof f.value === "string" ? (
-                <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
-              ) : (
-                // A node prints as authored — the "—" placeholder is a TEXT affordance, and a
-                // control renders its own empty state.
-                <View style={{ flex: 1, minWidth: 0 }}>{f.value}</View>
-              )}
-            </View>
-          ))}
+          {facts.map((f) => {
+            // THE ALIGNMENT LAW, the same one `DetailRow` runs on: the fact TOP-aligns and each
+            // cell centres within the first CONTROL LINE. A node value brings the kit's control
+            // band (an inline editor is 40 tall, a chip less), so both cells claim it — without
+            // it the label `Text`, stretched to the row, printed its words at the band's TOP,
+            // a half-band above the value it names. A STRING value has no band: label and value
+            // are the same 20px line, so they sit at the row's top and a long value that wraps
+            // still tops out level with its label.
+            const banded = typeof f.value !== "string";
+            return (
+              <View key={f.label} style={styles.fact}>
+                <View style={[{ width: factLabelWidth }, banded && styles.bandedCell]}>
+                  <Text size="sm" color="muted">{f.label}</Text>
+                </View>
+                {banded ? (
+                  // A node prints as authored — the "—" placeholder is a TEXT affordance, and a
+                  // control renders its own empty state.
+                  <View style={[{ flex: 1, minWidth: 0 }, styles.bandedCell]}>{f.value}</View>
+                ) : (
+                  <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
+                )}
+              </View>
+            );
+          })}
         </View>
       ) : null}
       {actions ? (
@@ -134,7 +147,11 @@ const styles = StyleSheet.create({
   box: { flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingTop: 14, paddingBottom: 10, gap: 12 },
   identity: { flexDirection: "row", alignItems: "center", gap: 10 },
   glyph: { width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" },
-  fact: { flexDirection: "row", gap: 10 },
+  fact: { flexDirection: "row", gap: 10, alignItems: "flex-start" },
+  // A cell on the control band: exactly `minHeight` tall for a one-line label / a short chip,
+  // and taller content (a wrapped label, a stack of controls) tops out level instead of being
+  // dragged toward the block's centre.
+  bandedCell: { minHeight: INLINE_CONTROL_HEIGHT, justifyContent: "center" },
   divider: { height: 1, backgroundColor: colors.zinc[100], marginHorizontal: -16 },
   actions: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, zIndex: 1 },
 });