@lotics/ui 46.8.0 → 46.8.2

package/docs/catalog.md

@@ -199,7 +199,10 @@ notion of adjustments or of three sides.
 - **The total is the sum of what is on screen.** Never a figure computed off a different array: a
   total that is not the sum of something visible is the one figure a reader cannot check.
 - **The row's verb sits in a fixed slot**, so the money column does not shift between a row that
-  can be removed and one that cannot. `locked` turns the editors into values for a settled charge.
+  can be removed and one that cannot. `locked` turns the editors into values for a settled charge
+  and silences EVERY verb on the band — the row's own and both money verbs. A verb on a figure
+  nobody can change is a control with nothing behind it, and a disabled one that merely repeats
+  the value beside it prints the same number twice on one line.
 - **Below its fork width** the name takes its own line and the arithmetic sits under it — a
   two-line row ON PURPOSE, measured on the band's own container because it lives in drawers as
   often as on pages. The arithmetic RIGHT-ALIGNS to the band there: laid out from the left it
@@ -1388,11 +1391,24 @@ 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; `empty` speaks for a record nobody has priced
+  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`
   you pass must be the sum of the lines on screen. Below its fork width the row takes two lines
   with the arithmetic right-aligned to the band — see § "Money you are PRICING" for the full

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)}
@@ -953,13 +953,34 @@ export function TplMoney() {
             stops. The section beat and the heading are what separate them. */}
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle description="Locked turns the editors into values once the money is collected — the band stops being a form and becomes the record of what was charged, with no verb slot drawn.">
+            <SectionHeadingTitle description="Locked turns the editors into values once the money is collected — the band stops being a form and becomes the record of what was charged. Every verb goes with them: a caller keeps passing the same props, and the band draws none of them.">
               Settled
             </SectionHeadingTitle>
           </SectionHeading>
+          {/* The verbs are passed EXACTLY as the editable band passes them, which
+              is what a real caller does — the same JSX renders a charge before and
+              after the money is collected. The BAND is what decides they are not
+              drawn, so this section is also the check on that: a verb surviving
+              here is a control acting on a figure nobody can change, and a
+              disabled one repeating the value beside it prints the same number
+              twice on one line. */}
           <ChargeLines totalLabel="Collected" total={190_000} formatMoney={money}>
-            <ChargeLine label="Delivery runs" quantity={40} unitPrice={4_000} locked />
-            <ChargeLine label="Site cleaning" quantity={1} unitPrice={30_000} locked />
+            <ChargeLine
+              label="Delivery runs"
+              quantity={40}
+              unitPrice={4_000}
+              locked
+              unitPriceActions={<InlineButton title={money(CEILING_RATE)} accessibilityLabel="Apply the ceiling rate" disabled onPress={() => {}} />}
+              action={<IconButton icon="x" size="sm" color="danger" tooltip="Remove this charge" onPress={() => {}} />}
+            />
+            <ChargeLine
+              label="Site cleaning"
+              quantity={1}
+              unitPrice={30_000}
+              locked
+              unitPriceActions={<InlineButton title={money(CEILING_RATE)} accessibilityLabel="Apply the ceiling rate" disabled onPress={() => {}} />}
+              action={<IconButton icon="x" size="sm" color="danger" tooltip="Remove this charge" onPress={() => {}} />}
+            />
           </ChargeLines>
         </Section>
 

package/package.json

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

package/src/charge_lines.tsx

@@ -103,7 +103,10 @@ export interface ChargeLineProps {
   /** The row's own verb, usually removal. Rendered in a fixed slot so the money
    *  column does not move between a row that has one and a row that does not. */
   action?: ReactNode;
-  /** Read-only band: editors become values, and no action slot is drawn. */
+  /** Read-only band: editors become values, and NO verb is drawn — not the row's
+   *  action and not either money verb. A verb on a figure nobody can change is a
+   *  control with nothing behind it, and a disabled one that merely repeats the
+   *  value beside it prints the same number twice. */
   locked?: boolean;
 }
 
@@ -243,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 ? 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. */}
@@ -270,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 ? 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>
@@ -316,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}