toga-ai 1.0.350 → 1.0.351

package/knowledge/2.0/apps/toga2-supply/INDEX.md

@@ -3,5 +3,5 @@
 | Doc | Summary | Files |
 |-----|---------|-------|
 | [TOGa Supply (toga2-supply) Architecture](architecture.md) | `toga2-supply` is the **React + Vite frontend** for TOGa Supply — warehouse fulfillment tooling (shipment selection, fulfill & ship against carrier APIs, NetSui | toga2-supply/src/api/toga.ts, toga2-supply/src/pages/ShipmentItems/view/ShipmentItemsPage.tsx, toga2-supply/src/pages/EditShipment/view/EditShipmentPage.tsx, toga2-supply/src/pages/EditShipment/api/UpdateShipmentApi.ts, toga2-supply/src/pages/Shipments/view/components/ShipmentsCardTableForm/ShipmentsCardTableForm.tsx |
-| [Fulfill & Ship](features/fulfill-and-ship.md) | Fulfill & Ship lets a warehouse user select sales-order line items, enter serials, pick a carrier/method, and in one action: create the Item Fulfillment records | toga2-supply/src/pages/ShipmentItems/view/ShipmentItemsPage.tsx, toga2-supply/src/pages/EditShipment/view/EditShipmentPage.tsx, toga2-supply/src/pages/EditShipment/view/components/forms/EditShipmentForm.tsx, toga2-supply/src/pages/EditShipment/view/components/SelectedShipmentItemsTable.tsx, toga2-supply/src/pages/EditShipment/view/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/src/pages/EditShipment/viewModel/FIELDS/DUMMYUPDATESHIPMENTFIELDS.json, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/tailwind.config.cjs, toga2-supply/src/pages/EditShipment/view/modals/ReturnShippingModal.tsx, toga2-supply/src/components/ui/BaseInput/BaseInput.tsx, toga2-supply/src/pages/EditShipment/api/UpdateShipmentApi.ts, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/formatShipmentData.ts, toga2-supply/src/pages/EditShipment/types.ts, toga2-supply/src/pages/Shipments/view/ShipmentsPage.tsx, toga2-supply/src/pages/Shipments/view/components/ShipmentsCardTableForm/ShipmentsCardTableForm.tsx, toga2-supply/src/pages/Shipments/api/ShipmentsApi.ts, toga2-supply/src/pages/Shipments/types.ts, toga2-supply/src/pages/FulfilledShipments/view/FulfilledShipmentsPage.tsx, toga2-supply/src/components/ui/CardTable/CardTable.tsx, toga2-supply/src/components/ui/CardTable/types.ts, toga2-supply/src/assets/pen-line.svg, _underscore/Model/Client/ItemFulfillment.php, _underscore/Trait/Netsuite/ItemFulfillment.php, _underscore/Component/Library/Carriers/Ups/Ups.php |
+| [Fulfill & Ship](features/fulfill-and-ship.md) | Fulfill & Ship lets a warehouse user select sales-order line items, enter serials, pick a carrier/method, and in one action: create the Item Fulfillment records | toga2-supply/src/pages/ShipmentItems/view/ShipmentItemsPage.tsx, toga2-supply/src/pages/EditShipment/view/EditShipmentPage.tsx, toga2-supply/src/pages/EditShipment/view/components/forms/EditShipmentForm.tsx, toga2-supply/src/pages/EditShipment/view/components/SelectedShipmentItemsTable.tsx, toga2-supply/src/pages/EditShipment/view/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/src/pages/EditShipment/viewModel/FIELDS/DUMMYUPDATESHIPMENTFIELDS.json, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/tailwind.config.cjs, toga2-supply/src/pages/EditShipment/view/modals/ReturnShippingModal.tsx, toga2-supply/src/styles/index.scss, toga2-supply/src/components/ui/BaseInput/BaseInput.tsx, toga2-supply/src/pages/EditShipment/api/UpdateShipmentApi.ts, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/formatShipmentData.ts, toga2-supply/src/pages/EditShipment/types.ts, toga2-supply/src/pages/Shipments/view/ShipmentsPage.tsx, toga2-supply/src/pages/Shipments/view/components/ShipmentsCardTableForm/ShipmentsCardTableForm.tsx, toga2-supply/src/pages/Shipments/api/ShipmentsApi.ts, toga2-supply/src/pages/Shipments/types.ts, toga2-supply/src/pages/FulfilledShipments/view/FulfilledShipmentsPage.tsx, toga2-supply/src/components/ui/CardTable/CardTable.tsx, toga2-supply/src/components/ui/CardTable/types.ts, toga2-supply/src/assets/pen-line.svg, _underscore/Model/Client/ItemFulfillment.php, _underscore/Trait/Netsuite/ItemFulfillment.php, _underscore/Component/Library/Carriers/Ups/Ups.php |
 | [AWS Amplify Build & Deploy (non-prod environments)](workflows/amplify-build-and-deploy.md) | How `toga2-supply` (React + Vite) builds and deploys on **AWS Amplify**. | toga2-supply/amplify.yml, toga2-supply/.gitattributes, toga2-supply/.github/workflows/sync-stage-environments.yml, toga2-supply/.env.qc-security |

package/knowledge/2.0/apps/toga2-supply/features/fulfill-and-ship.md

@@ -18,6 +18,7 @@ files:
   - toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx
   - toga2-supply/tailwind.config.cjs
   - toga2-supply/src/pages/EditShipment/view/modals/ReturnShippingModal.tsx
+  - toga2-supply/src/styles/index.scss
   - toga2-supply/src/components/ui/BaseInput/BaseInput.tsx
   - toga2-supply/src/pages/EditShipment/api/UpdateShipmentApi.ts
   - toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/formatShipmentData.ts
@@ -187,6 +188,27 @@ bare string** — see the gotcha below before wiring a new select field.
   (`onBlur` when `field.isCurrency`). Return modal (`ReturnShippingModal.tsx`): compact selects
   vertically centered; Carrier Account # widened to `w-[172px]` to match Carrier.
 
+### Edit Return Label modal — searchable Addressee combobox + discard guard (2026-07-15)
+
+`ReturnShippingModal.tsx`:
+- **Addressee is a searchable combobox built on a native `<input list>` + `<datalist>`** of
+  warehouse/location options — typing filters the list (Chromium does a substring "contains" match;
+  Firefox only prefix-matches) and **custom free text is still allowed**; selecting a known option
+  prefills the address via `applyWarehouse`. Prefer this native pattern over react-select when free
+  text plus suggestions are both wanted — but mind the two gotchas below.
+- **Backdrop-click discard guard.** `BaseModal` calls its `onClose` prop on backdrop click, which
+  would silently discard unsaved edits. Pass a **guarded** handler to `BaseModal`'s `onClose`
+  (`if (formMethods.formState.isDirty) return; onClose();`) so an accidental outside click can't
+  drop a dirty form, while **Cancel and the header X still call the real `onClose`** to close/discard
+  explicitly. Reuse this pattern for any BaseModal wrapping an editable form.
+
+### Shared checkbox restyled to the Figma design-system spec (2026-07-15)
+
+`BaseInput.tsx`'s checkbox now matches the Figma checkbox component: **16px** (was 20px),
+`rounded-sm`, unchecked border `navy-300`, checked fill `supply-blue-400` (`#3F5DCA`, the primary),
+12px check glyph. This is the **shared** checkbox, so the change applies **app-wide**, not just to
+the shipment forms — audit other consumers when touching it.
+
 ## Planned direction — "Fulfill & Ship" from an existing Item Fulfillment (future, Eric)
 
 A **third entry mode** is planned (distinct from Select-Items-create and the pencil-edit): a
@@ -221,7 +243,27 @@ the call 403s and returns no label.
 
 ## Gotchas / known issues
 
-- **⚠ Tailwind does NOT scan the field-config JSON — a class used ONLY in `viewModel/FIELDS/*.json`
+- **⚠ Native `<datalist>` renders its OWN dropdown arrow, un-hideable by Tailwind.** An
+  `<input list>` combobox (the Edit Return Label Addressee) shows a **second dark arrow** (the
+  webkit calendar-picker indicator) that a Tailwind arbitrary variant can't reliably hide. Kill it
+  with a **real global CSS rule** in the source stylesheet
+  `src/styles/index.scss` (imported by `main.tsx`):
+  `input[list]::-webkit-calendar-picker-indicator { display: none !important; }`.
+  **Edit `index.scss`, NOT `index.css`** — `index.css` is compiled output and will be overwritten.
+  Also set **`autoComplete="off"`** on the input or the browser's address-autofill popup
+  ("Saved data / Manage personal info") overlaps and fights the datalist.
+- **⚠ A `className` template literal must keep the trailing space before `${...}`.** `border ${cond
+  ? a : b}` is correct; `border${cond ? a : b}` concatenates into an invalid single class
+  (e.g. `borderborder-navy-300`) and the utility silently no-ops. Concrete failure: the `BaseInput`
+  checkbox's unchecked border disappeared because the space was dropped. Watch this whenever
+  conditional classes are appended to a static base class.
+- **⚠ `justify-between` + `clamp()` gaps are frozen when the container is a FIXED width.** The Update
+  Info field row uses `gap-x-[clamp(2px,1vw,50px)]` with `justify-between`, but the card was a fixed
+  `w-[1820px]`, so `justify-between` distributed columns across a constant width and the gaps never
+  changed on resize. Fix: make the card `w-full max-w-[1820px]` and the form section `w-full` so the
+  width tracks the viewport and the clamp'd gaps grow/shrink with it. Note `justify-between` does
+  **not** cap the max gap at 50px on very wide screens — the `clamp` only *floors* at 2px; the max
+  applies until columns are pushed to the edges. (`EditShipmentPage.tsx`.) — a class used ONLY in `viewModel/FIELDS/*.json`
   is silently inert.** The config-driven forms author Tailwind utility classes inside the field JSON
   (e.g. `DUMMYUPDATESHIPMENTFIELDS.json`), but `tailwind.config.cjs` `content` globs only scan
   `./src/**/*.{js,ts,jsx,tsx}` (+ `index.html` + toga-blox dist) — **not `.json`**. So a class used
@@ -417,6 +459,18 @@ not the base `_Model_Client_ItemFulfillment`. Tested with GroWrk; UPS support wa
 for Compass and is not yet in prod.
 
 ## Change history
+- 2026-07-15 — TRUE-79191: made the Edit Return Label **Addressee a searchable combobox** (native
+  `<input list>` + `<datalist>`, filters + allows custom text, prefills via `applyWarehouse`); added a
+  **backdrop-click discard guard** (guarded `BaseModal onClose` on `formState.isDirty`); restyled the
+  **shared `BaseInput` checkbox** to the Figma spec (16px, navy-300 border, `supply-blue-400` fill,
+  app-wide). Documented four durable gotchas: native `<datalist>`'s un-hideable arrow (hide via a
+  real global rule in `src/styles/index.scss`, not the compiled `index.css`) + `autoComplete="off"`
+  to stop autofill overlap; the `className` **trailing-space-before-`${...}`** footgun (dropped space
+  → invalid concatenated class → silent no-op, killed the checkbox border); and `justify-between` +
+  `clamp()` **gaps frozen by a fixed-width card** (fix: `w-full max-w-[1820px]` so width tracks the
+  viewport). Remaining Figma polish (5-col address grid, Signature default object, declared-cost
+  2-decimal rehydrate, Clear All wiring, residential alignment, footer/divider spacing) was cosmetic
+  — no doc change. (mhammontree)
 - 2026-07-15 — TRUE-79191: unified the **dropdown chevron glyph** across the compact selects — added a
   `CompactDropdownIndicator` (FA `chevronDown`) to `BaseInput` and wired it into both react-select
   `components` blocks **only when `compact` is true**, so the react-select caret matches the native

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toga-ai",
-  "version": "1.0.350",
+  "version": "1.0.351",
   "description": "TOGA Technology Team Claude Knowledge System — shared AI coding harness with skills, knowledge base CLI, and project installer for Claude Code.",
   "keywords": [
     "claude",