@lotics/ui 27.6.0 → 27.7.0

package/docs/catalog.md

@@ -877,7 +877,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`reference_field`** — `ReferenceField`: a reference to ANOTHER RECORD, rendered as a
   FIELD VALUE — the kit's inline-editor surface (so a pointer sits in the value column
   like the editors above and below it), whose press opens a PEEK of that record's facts.
-  `name` + optional `code` + `facts`, plus the verb callbacks below. The verbs live INSIDE the
+  `name` + optional `code` + `facts`, plus the verb callbacks below. The peek takes THE FIELD'S
+  WIDTH (`inheritTriggerWidth`, as `InlineSelect` does), floored at `MIN_CONTROL_WIDTH` — a
+  panel narrower than the control that opened it reads as belonging to something else. So the
+  field truncates its name to one line and the peek's header WRAPS the whole of it: the column
+  stays scannable, the full value is one press away. Between the floor and `labelWidth +
+  MIN_CONTROL_WIDTH + 24` a `DetailTable` stacks, which is the right grammar at that width.
+  The verbs live INSIDE the
   peek, never on the field, and they are ALL `Button`s at one altitude — a peek is
   dialog-scale and a dialog's verbs are buttons, so mixing weights only made the reader rank
   four acts that are four acts. The row splits by WHAT EACH TOUCHES, and the spacer is that

package/examples/tpl_record.tsx

@@ -136,7 +136,11 @@ interface Customer {
 // inline Tax ID fix-up in the Customer section.
 const KNOWN_CUSTOMERS: Customer[] = [
   { id: "cus_01", name: "Northwind Traders", code: "KH-0148", taxId: "0312456780", contact: "Mara Lindqvist", city: "Gothenburg", address: "Ringvägen 118, 4 tr, 116 61 Stockholm, Sweden", since: "2019-03-14" },
-  { id: "cus_02", name: "Harbor Freight Lines", code: "KH-0203", taxId: "0312998820", contact: "Diego Alvarez", city: "Rotterdam", address: "Waalhaven Oostzijde 81, 3087 BM Rotterdam, Netherlands", since: "2021-11-02" },
+  // DELIBERATELY too long for one line. A register of tidy two-word names cannot
+  // show what a reference does when it does not fit — which is truncate in the
+  // field and wrap in the peek — so the one fixture the template opens with is the
+  // realistic worst case. Real customer names look like this.
+  { id: "cus_02", name: "Harbor Freight Lines & Coastal Forwarding Group", code: "KH-0203", taxId: "0312998820", contact: "Diego Alvarez", city: "Rotterdam", address: "Waalhaven Oostzijde 81, 3087 BM Rotterdam, Netherlands", since: "2021-11-02" },
   { id: "cus_03", name: "Summit Packaging Co.", code: "KH-0231", taxId: "0301557742", contact: "Priya Nair", city: "Singapore", address: "9 Tuas Bay Walk, #03-14, Singapore 637803", since: "2023-06-19" },
   { id: "cus_04", name: "Atlas Distribution", code: "KH-0117", taxId: "", contact: "Tom Becker", city: "Hamburg", address: "Grosser Grasbrook 9, 20457 Hamburg, Germany", since: "2018-01-30" },
   { id: "cus_05", name: "Bluewater Logistics", code: "KH-0294", taxId: "0312004455", contact: "Lena Fischer", city: "Antwerp", address: "Noorderlaan 127, 2030 Antwerpen, Belgium", since: "2022-09-08" },

package/package.json

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

package/src/reference_field.tsx

@@ -220,6 +220,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
       triggerRef={anchor}
       side="bottom"
       align="start"
+      inheritTriggerWidth
     >
       {/* THE KIT'S FIELD, not a lookalike. This was hand-rolled — a Pressable
           wearing copies of the field's border, radius, height and hover — and it
@@ -261,12 +262,24 @@ export function ReferenceField(props: ReferenceFieldProps) {
           rather than a hand-picked font weight; the facts are `DetailRow`s, which
           is what label-beside-value IS everywhere else on this page; and the
           verbs sit in the popover's own pinned footer rather than floating after
-          the last fact. Width matches `Peek`'s own content width so every peek in
-          an app is the same object.
-          `labelWidth` is the one override, and it is not arbitrary: a `DetailTable`
-          STACKS its columns below `labelWidth + MIN_CONTROL_WIDTH + 24`, so the
-          page's 150 would flip a 320 popover into stacked form grammar. 88 keeps
-          the summary side-by-side, which is the whole point of a glance. */}
+          the last fact.
+
+          WIDTH COMES FROM THE FIELD (`inheritTriggerWidth`), not a constant. A
+          fixed 320 was "every peek in an app is the same object", and the object
+          it was actually the same as was nothing on screen: measured on a record
+          page, a 558px field opened a 320px panel left-aligned under it, stopping
+          238px short of the edge the reader's eye had just travelled to. A
+          popover narrower than the control that opened it reads as belonging to
+          something else. `InlineSelect` — the same shape, an inline field opening
+          a `triggerRef` popover — already inherits its field's width, so the two
+          were following different rules for one job.
+
+          The prop is floored at `MIN_CONTROL_WIDTH`, so a reference in a dense
+          grid column still opens something readable rather than a 90px sliver.
+          Between that floor and `labelWidth + MIN_CONTROL_WIDTH + 24` a
+          `DetailTable` STACKS its columns, which is the right answer at that
+          width, not a failure — 88 keeps the side-by-side grammar wherever there
+          is room for it, which is the whole point of a glance. */}
       {/* `PopoverContent` PARTITIONS its children: a `PopoverHeader` sits above
           the scroller, a `PopoverFooter` is pinned below it, and everything else
           scrolls between them. This component used none of that — it disabled
@@ -274,11 +287,12 @@ export function ReferenceField(props: ReferenceFieldProps) {
           is invisible at three facts and fatal at eleven: the panel ran past the
           viewport with no way to scroll, carrying its own Save button off-screen
           with it. The three-fact fixture is what hid it. */}
-      {/* `width` on the PANEL, not `style` — `style` reaches only the body, so a
-          long referenced name in the header stretched the panel past it and the
-          facts sat in a box wider than themselves. `maxHeight` stays on the
-          body: that is the band that scrolls. */}
-      <PopoverContent width={320} style={{ maxHeight: 420 }}>
+      {/* No `width` here at all now: a fixed panel width is applied LAST in the
+          style chain, so it beats `inheritTriggerWidth` — passing both would have
+          silently kept the 320. `maxHeight` stays on the body, which is the band
+          that scrolls; the header keeps its own height so a wrapped two-line name
+          is never what scrolls out of view. */}
+      <PopoverContent style={{ maxHeight: 420 }}>
         <PopoverHeader>
           <DialogSectionHeadingTitle description={code}>{name}</DialogSectionHeadingTitle>
         </PopoverHeader>

package/src/text_input_field.tsx

@@ -256,7 +256,14 @@ const styles = StyleSheet.create({
   // padding stay (they hold the field's size); the horizontal padding goes,
   // because the host already spent CONTROL_TEXT_INSET and two insets stacked
   // shift the text 8px right the moment the field focuses.
-  seamless: { borderColor: "transparent", backgroundColor: "transparent", paddingHorizontal: 0 },
+  //
+  // `borderWidth: 0`, not merely a transparent colour. A transparent border still
+  // OCCUPIES its 1px in the box model, so hiding the colour left the second inset
+  // in place at 1/8th the size: measured, the text moved 561 → 562 on focus — the
+  // same defect this style exists to fix, at the scale that survives a glance.
+  // Safe for height because the box is `border-box`: dropping the border changes
+  // the content box, never the field's 40px outer size.
+  seamless: { borderColor: "transparent", borderWidth: 0, backgroundColor: "transparent", paddingHorizontal: 0 },
   disabled: {
     color: colors.zinc["400"],
     outlineStyle: "none" as unknown as "solid",