@lotics/ui 18.2.0 → 19.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "18.2.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/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 },
 });