@lotics/ui 46.8.1 → 46.9.0

package/docs/catalog.md

@@ -1032,7 +1032,14 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   differs from the visible text is what breaks label-in-name.
 - **`select`** — `Select`: rich/custom-rendered, single/multi, select-all, chips via
   `renderSelected(item, { remove })` + `searchable` + `allowCustom` — the tag field is just
-  a multi Select; opens `OptionList`. **Set `searchPlaceholder` whenever `allowCustom` is on**:
+  a multi Select; opens `OptionList`. **`emptyText` replaces the list's "No results" when the
+  caller knows what the reader should DO about it** — where the missing thing gets created, why the
+  set is narrowed. A select cannot know that; the reader is stuck at exactly that moment, and it is
+  the one place a list may speak without becoming permanent furniture, since it shows only when the
+  search finds nothing. Reach for it instead of a create-in-place row wherever the missing record
+  cannot be validly made from this screen: a vehicle needs its documents, a party needs its tax id,
+  and a stub minted here is a record that fails the next gate it meets.
+  **Set `searchPlaceholder` whenever `allowCustom` is on**:
   the create row only exists once there is a query, so on an untyped menu the placeholder is the
   only always-visible place that can say a new value is allowed. `customOptionLabel` names what
   the create row will
@@ -1391,9 +1398,22 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   and not interchangeable with it: a ledger has nothing to type into and this has no notion of
   adjustments. A charge is ONE line — `quantity`/`unitPrice` derive the amount and the amount is
   never typed; leave both out and the `amount` itself becomes the editor (`amountActions` puts a
-  list price one tap away, `unitPriceActions` a rate). Verbs sit BESIDE the field, never inside
-  it, and the row's own verb (`action`, usually removal) sits in a slot held open on every row —
-  both so the money column cannot move between rows. `extra` carries a second control belonging
+  list price one tap away, `unitPriceActions` a rate). **A verb is named for the ACT, never for the
+  value it would set** — label one with the target figure and every row already at that figure
+  prints the same number twice in a row (three times, once the derived amount agrees), which is the
+  normal state wherever the figures are pre-filled from the same source the verb applies. A fixed
+  label also keeps its width equal across rows, which is what the pass-unconditionally rule exists
+  to protect; put the figure in the accessible name if it is worth announcing. **A money verb renders
+  INSIDE the field it acts on**, on that control's own surface — an `InlineButton` is an inner
+  button and is never a thing standing on its own beside the control it belongs to. As a sibling it
+  also takes its width out of the NAME's column, which is how a charge called "Vệ sinh bến bãi"
+  renders as "Vệ sinh b…". The row's own verb (`action`, usually removal) is the exception that
+  proves it: it belongs to the ROW rather than to any one figure, so it sits in a slot of its own,
+  held open on every row so the money column cannot move between them.
+  **And before reaching for a verb at all, ask whether the value is simply the field's DEFAULT** —
+  a tariff, a list price, the figure a line is created with. Then there is no verb: the field
+  already holds it, and clearing the field restores it. A button that re-applies what the field
+  would hold anyway is a control for a state the reader cannot reach. `extra` carries a second control belonging
   to the charge (how it was paid); `warning` names a problem on the line that has it; `locked`
   turns the editors into values for a settled band and draws no verb of any kind; `empty` speaks for a record nobody has priced
   yet. `formatMoney` is the BAND's, so two lines cannot disagree about a currency, and the `total`

package/examples/tpl_money.tsx

@@ -411,14 +411,19 @@ export function TplMoney() {
           unitPrice={l.unitPrice}
           onQuantityChange={(v) => patchLine(l.key, { quantity: v })}
           onUnitPriceChange={(v) => patchLine(l.key, { unitPrice: v })}
-          /* the rate card's ceiling, one tap, BESIDE the field it fills */
-          /* Unconditional + `disabled`, never conditional: a verb passed only when it
+          /* The rate card's ceiling, one tap, ON the field it fills — an
+             InlineButton is an inner button and never stands on its own beside
+             the control it acts on.
+             Named for the ACT, with the figure in the accessible name: a verb
+             labelled with the value it would set prints that value twice on
+             every row already holding it.
+             Unconditional + `disabled`, never conditional: a verb passed only when it
              has work makes the field narrower on the rows that carry it, so those rows
              stop sharing this money column with the rest. */
           unitPriceActions={
             <InlineButton
-              title={money(CEILING_RATE)}
-              accessibilityLabel="Apply the ceiling rate"
+              title="Ceiling"
+              accessibilityLabel={`Apply the ceiling rate of ${money(CEILING_RATE)}`}
               disabled={l.key !== "runs" || l.unitPrice === CEILING_RATE}
               onPress={() => patchLine(l.key, { unitPrice: CEILING_RATE })}
             />
@@ -714,14 +719,9 @@ export function TplMoney() {
                               placeholder="—"
                               accessibilityLabel={`Amount for ${c.label}`}
                               /* The list price, one tap, ON the field it fills —
-                                 and this is the fork from `ChargeLines`, which
-                                 puts the same verb BESIDE the field. The
-                                 discriminator is what the field sits in: here it
-                                 is a form row whose value column grows, so a verb
-                                 on the field's own surface moves nothing. In a
-                                 right-aligned money COLUMN it would eat the
-                                 field's width and slide the figure off the
-                                 column its neighbours are on. */
+                                 the same placement `ChargeLines` uses, because a
+                                 verb belongs to the control it acts on wherever
+                                 that control sits. */
                               actions={
                                 <InlineButton
                                   title={money(c.standard)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "46.8.1",
+  "version": "46.9.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/charge_lines.tsx

@@ -246,16 +246,16 @@ export function ChargeLine(props: ChargeLineProps) {
             placeholder="—"
             align="right"
             accessibilityLabel={words.unitPrice(label)}
+            /* INSIDE the field, on its own surface — an InlineButton is an inner
+               button, never a thing standing on its own beside the control it
+               acts on. Rendered as a sibling it also takes its width out of the
+               NAME's column, which is how a charge called "Vệ sinh bến bãi" came
+               to render as "Vệ sinh b...". */
+            actions={unitPriceActions}
           />
         )}
       </View>
       )}
-      {/* BESIDE the price field, never inside it: a verb inside eats the field's
-          width, so the figure slides left and a row carrying a one-tap rate stops
-          sharing this column with a row that has none. Width is the verb's own —
-          the contract is that a caller passes it on every row and DISABLES it
-          where it has nothing to do, which is what keeps the rows equal. */}
-      {!priced || locked ? null : unitPriceActions}
       {/* The amount ENDS the expression it derives from. Put it on a second
           line and the reader parses left to right, then jumps back to find the
           answer — and it lands in no column, so the total below closes nothing. */}
@@ -273,13 +273,11 @@ export function ChargeLine(props: ChargeLineProps) {
             placeholder="—"
             align="right"
             accessibilityLabel={words.amount(label)}
+            /* The flat line's twin, and INSIDE its field for the same reason. */
+            actions={amountActions}
           />
         )}
       </View>
-      {/* The flat line's twin of `unitPriceActions`, on the figure a flat line
-          actually edits — its amount. Same contract: pass it on every row and
-          disable it where it has nothing to do. */}
-      {priced || locked ? null : amountActions}
       {/* Held open whether or not this row has a verb, so the money column does
           not shift between a row that can be removed and one that cannot. */}
       <View style={styles.actionSlot}>{locked ? null : action}</View>
@@ -319,7 +317,13 @@ export function ChargeLine(props: ChargeLineProps) {
     <View>
     <View style={styles.row}>
       <View style={styles.grow}>
-        <Text size="sm" numberOfLines={1}>
+        {/* The name may take a SECOND line rather than lose a word. The fork
+            threshold is measured on the band, but what actually runs out is the
+            room LEFT for the name — and a money verb takes another slice of it,
+            so a band can sit comfortably above the fork width and still have
+            under 100px for a charge called "Vệ sinh bến bãi". Capped at two so a
+            pathological name cannot push the arithmetic down the page. */}
+        <Text size="sm" numberOfLines={2}>
           {label}
         </Text>
         {props.extra ? <View style={styles.extra}>{props.extra}</View> : null}

package/src/inline_select.tsx

@@ -45,6 +45,13 @@ interface InlineSelectBaseProps<T extends string, D = unknown> {
   accessibilityLabel?: string;
   /** Show an in-menu search box; default false. */
   searchable?: boolean;
+  /** What the list says when it has nothing to offer — no options at all, or a
+   *  search that matched none. The default states the fact ("No results"); pass
+   *  this when the caller knows what the reader should DO about it, which the
+   *  list cannot know: where the missing thing is created, why the set is
+   *  narrowed. It is the one moment a select may speak without becoming
+   *  permanent furniture, because it appears only when the reader is stuck. */
+  emptyText?: string;
   /** Offer a "create" row when the query matches no option — picking it commits the
    *  typed value (single) / adds it to the set (multi). Implies `searchable`. */
   allowCustom?: boolean;
@@ -150,7 +157,7 @@ function InlineSelectShell(props: {
 }
 
 export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { options, renderOptionContent, getOptionDescription, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
+  const { options, renderOptionContent, getOptionDescription, placeholder, disabled, accessibilityLabel, searchable = false, emptyText, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
   const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(autoFocus);
   const [saving, setSaving] = useState(false);
@@ -239,6 +246,8 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
         <OptionList<T, true, D>
           multi
           getOptionDescription={getOptionDescription}
+          emptyText={emptyText}
+
           search={{ mode: searchMode }}
           options={options}
           value={draft}
@@ -286,6 +295,8 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
     >
       <OptionList<T, false, D>
         getOptionDescription={getOptionDescription}
+        emptyText={emptyText}
+
         search={{ mode: searchMode }}
         options={options}
         value={value}