@lotics/ui 47.2.0 → 47.3.0

package/MIGRATION.md

@@ -1,8 +1,47 @@
 # @lotics/ui — migration notes
 
 Breaking changes, newest first — normally per major, plus the rare minor that broke a type
-anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
-this file exists only to move an app from one release to the next.
+anyway (recorded under its exact version), **and a minor that changes what an existing call site
+LOOKS LIKE with no code change**. That last kind needs an entry precisely because nothing forces
+the author to read one: their screens shift on an `npm update` and they have nothing to attribute
+it to, so they revert or file a bug. The current contract lives in `AGENTS.md` + `docs/`; this
+file exists only to move an app from one release to the next.
+
+## 47.1.0
+
+**No API breaks and no action required — but four things change what an existing screen looks
+like.** All four are fixes to a component asserting something it could not know, so the new
+rendering is the correct one; they are listed so nobody spends an afternoon on them.
+
+- **`ProgressBar`'s compact caption is muted at every ratio.** It used to paint `success` at
+  ≥ 100%. A meter can mean "done" (a task, an upload) or "used up" (a credit limit, a quota), and
+  the same 100% is good in one and bad in the other — so every usage-against-a-cap meter drew a red
+  bar with a green number beside it. The verdict now lives only where the caller states it: the
+  FILL, via `completeColor`. A task meter that wants a green number renders its own caption
+  (`format="none"` plus your text).
+- **`Breakdown`'s value is `medium` and `StackedBarChart`'s label is `regular`.** They draw the same
+  row — label left, right-aligned figure, proportion bar — and disagreed about weight, so a card
+  placing them side by side made one read as more important for no stated reason. One rule now: the
+  label names the series and stays regular, the figure carries the weight, and `semibold` stays
+  reserved for selection.
+- **A disabled `MenuButton` now looks disabled.** It blocked the press and announced
+  `aria-disabled` while rendering at full ink, so a blocked item was pixel-identical to a live one.
+  If you were hiding items rather than disabling them to work around this, you can stop.
+- **`ChargeLines`' narrow quantity slot is 60px (was 48).** `28,9` needed 33px in the 30 available
+  and clipped. Slightly less room for the price column in the narrow fork.
+
+Two smaller layout corrections in the same release: `Finding`'s readings stretch instead of
+shrink-wrapping past their column, and `RecordSummary`'s identity row wraps rather than letting the
+title shrink while the metric keeps full width.
+
+**New, all additive and defaulted to the previous behaviour:** `TableColumn.lead` (declare the
+fixed chrome inside a flexible cell, so the fit's read floor is for the TEXT — pass it wherever you
+put a mark in the subject cell), `MemberChip.showAvatar` (`false` where the member is one field
+among columns rather than the row's subject), `InlineStatic.actions` and `InlineSlot.actions` (a
+verb about a read-only value, on the value's own surface), `ChargeLines.formatQuantity`
+(band-level, like `formatMoney` — without it the kit printed `28.9` in a locale that writes
+`28,9`), `ThumbnailStack.decorative` (silence the marks where the row already names the thing),
+and `FormTextInput` now forwards `optionalLabel`, which it previously accepted and dropped.
 
 ## 47.0.0
 

package/docs/data_entry.md

@@ -83,6 +83,15 @@ already has: errors arrive from a validate pass, and editing a field clears that
 
 ## A picker over a select FIELD keeps the field's colours — `optionPicker`
 
+**First, the precondition nobody states: the field's colours have to MEAN something.** A platform
+that auto-assigns option colours does it **by position** — the first option blue, then green,
+amber, red, purple, teal — so a field whose options were created without colours carries a
+sequence nobody chose. Propagate that faithfully and you ship the accident consistently: measured
+on a real workspace, the same rule would have painted an in-transit order **red** and a customer on
+delivery hold **green**, inches from the control that decides whether to keep delivering to them.
+So: set the colours on the FIELD, semantically, then carry them everywhere. Carrying an
+auto-assigned default is worse than plain text, because plain text does not assert anything.
+
     <InlineSelect {...optionPicker(fields.city?.options ?? [])}                    // a category
                   value={cityKey} onSave={(v) => save({ city: v })} />
     <InlineSelect {...optionPicker(fields.status?.options ?? [], { badge: "dot" })} // a status

package/docs/reviewing.md

@@ -10,6 +10,24 @@ Everything here is about a screen **that already renders**. Building one starts
 
 ---
 
+## The kit's peer ranges are a resolution contract, not a floor
+
+`lucide-react-native` sat at `>=0.460.0` — unbounded — while `icon.tsx` deep-imports
+`lucide-react-native/dist/esm/icons/<name>` to keep the ~1650-icon barrel out of the
+Metro bundle. lucide later shipped an `exports` map listing only `.` and `./icons`, so
+that path stopped being publicly exported, and every resolver that honours `exports`
+(Vite's dep optimizer among them) began refusing it. Nothing in this repo changed; the
+range simply accepted the version that changed the rules.
+
+It surfaced late and looked intermittent because a warm `.vite` cache never re-resolves
+— only a fresh install hits it, which is why it kept coming back and kept getting
+patched as a symptom (clear the cache, add a local `exclude`).
+
+**A peer range with no upper bound on a package we deep-import is a standing invitation
+for this.** When the kit reaches past a package's public entry points, bound the range,
+and say in the code why the deep path is being used at all.
+
+
 ## The method
 
 **"Looks off" is where a finding starts.** Trust the impression and use measurement to say
@@ -560,6 +578,23 @@ on a defect that does not exist. Walk the surface with real `Tab` presses and re
 `box-shadow` at each stop; `.focus()` is only good for asking what CAN take focus, never for how it
 looks when it does.
 
+### 9b. One VALUE, one treatment — the cross-shape check
+Probe 1 asks "same shape → same treatment", which groups filter chips with filter chips and table
+cells with table cells, finds each group internally consistent, and passes. The defect it cannot
+see is **one datum reading two ways across shapes**: a stage drawn as a coloured badge in the
+register and as plain text in the filter that selects it, on the same screen.
+
+**Collect**, per select field: every surface its value renders on — register cell, filter chip and
+its dropdown, drawer, record field at rest and editing, picker option, diff row, summary line,
+chart legend — and the colour each one paints. **The signature** is one field whose renders
+disagree: some coloured, some plain, or two different colours for one key.
+
+Two causes, both silent. The picker's own option shape has no colour member, so the obvious
+adapter drops it and compiles; and a hand-written key→colour map beside the field's own colours is
+a second copy free to disagree — check it against the FIELD, not against itself.
+
+→ [data_entry.md](./data_entry.md) §"A picker over a select FIELD keeps the field's colours".
+
 ### 10. Microcopy
 - **No punctuation doing a word's job.** ` · ` is banned outright — it claims a relationship while
   refusing to name it, and it is the loudest templated-metadata tell there is. If a mark cannot be

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.2.0",
+  "version": "47.3.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",
@@ -355,7 +355,7 @@
     "@react-native-picker/picker": ">=2.0.0",
     "expo-image": ">=3.0.0",
     "lucide-react": ">=0.460.0",
-    "lucide-react-native": ">=0.460.0",
+    "lucide-react-native": "^0.562.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-native": ">=0.85.0",

package/src/filter_chip.tsx

@@ -124,7 +124,7 @@ export function FilterChip(props: FilterChipProps) {
           testID={testID}
           onPress={() => setOpen(!isOpen)}
           accessibilityRole="button"
-          accessibilityState={{ expanded: isOpen }}
+          aria-expanded={isOpen}
           style={styles.rowHeader}
         >
           <Text size="sm" weight="medium" color="zinc-700">{label}</Text>

package/src/vite.mjs

@@ -102,11 +102,44 @@ export const loticsOptimizeDeps = [
  *   const base = loticsResolve();
  *   resolve: { ...base, alias: [...base.alias, { find: "x", replacement: "y" }] }
  */
+/**
+ * Absolute path to lucide's ESM icon directory, or null when it isn't installed.
+ *
+ * `icon.tsx` deep-imports `lucide-react-native/dist/esm/icons/<name>` to keep the
+ * ~1650-icon barrel out of the Metro bundle. lucide 0.562 ships an `exports` map
+ * listing only `.` and `./icons`, so that specifier is not publicly exported —
+ * and Vite's dep optimizer, which honours `exports`, refuses it outright:
+ * `Missing "./dist/esm/icons/activity" specifier`. The rollup build resolves it
+ * anyway, so the failure is dev-only, and it stayed hidden because a warm
+ * `.vite` cache never re-resolves. Any app installing fresh hits it immediately.
+ *
+ * Resolving the package's own ESM entry and walking to its sibling `icons/`
+ * gives the optimizer a real path, so no consumer has to touch its vite config
+ * and no bundle changes. `import.meta.resolve` (not `createRequire`) because we
+ * need the ESM condition — the require condition lands in `dist/cjs`.
+ */
+function lucideIconsDir() {
+  try {
+    // `import.meta.resolve`, and string-slicing rather than `node:path` /
+    // `node:url`, because this module must stay a zero-import leaf — see the
+    // header. The ESM condition matters: the require condition lands in
+    // `dist/cjs`, whose icons are CJS and would defeat the point.
+    const url = import.meta.resolve("lucide-react-native");
+    if (!url.startsWith("file://")) return null;
+    const file = decodeURIComponent(url.slice("file://".length));
+    return `${file.slice(0, file.lastIndexOf("/"))}/icons`;
+  } catch {
+    return null;
+  }
+}
+
 export function loticsResolve() {
   const uiSrc = process.env.LOTICS_UI_SRC;
+  const icons = lucideIconsDir();
   return {
     alias: [
       ...(uiSrc ? [{ find: /^@lotics\/ui\/(.+)$/, replacement: `${uiSrc}/$1` }] : []),
+      ...(icons ? [{ find: /^lucide-react-native\/dist\/esm\/icons\/(.+)$/, replacement: `${icons}/$1` }] : []),
       { find: "react-native", replacement: "react-native-web" },
     ],
     extensions: [".web.tsx", ".web.ts", ".web.js", ".tsx", ".ts", ".jsx", ".js", ".mjs", ".mts"],