@lotics/ui 45.6.0 → 45.7.0

package/AGENTS.md

@@ -104,10 +104,12 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   `error={overdue ? … }` is the tell: it makes a date due tomorrow read like one due in three
   months. → [catalog.md §Dates & times](./docs/catalog.md).
 - **A third-party channel takes `BrandMark`, our own glyphs take `Icon`.** `@lotics/ui/brand_mark`
-  draws Facebook / Zalo / LinkedIn / X / Google Meet as solid single-colour silhouettes — a reader
-  scanning a feed recognises the logo before the word. The names are an allowlist, so a channel
-  with no mark (a phone call, an event, a website) fails to typecheck and falls back to `Icon`
-  instead of borrowing another company's logo. → [catalog.md §Text & formatting](./docs/catalog.md).
+  draws Facebook / Zalo / LinkedIn / X / Google Meet / Gmail / Outlook / Google Drive as solid
+  single-colour silhouettes — a reader scanning a feed recognises the logo before the word. The
+  names are an allowlist, so a channel with no mark (a phone call, an event, a website) fails to
+  typecheck and falls back to `Icon` instead of borrowing another company's logo. `SwitchButton`
+  takes one directly as `brand`, for a row naming an outside service.
+  → [catalog.md §Text & formatting](./docs/catalog.md).
 - **The kit's fonts/colors/icons ARE the design system** — never a custom font, icon set, or
   hand-picked palette shade; color is `solid`/`tint`/`ramp` with ONE accent per screen.
 - **Hand-typed type is off-system — and it always lands too small.** Every run of language is

package/docs/catalog.md

@@ -476,13 +476,17 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `SubsectionHeading` instead. Pick between this and `Eyebrow` by what is LABELLED — a block or a
   value; composition.md § Eyebrow vs group lead has the table.
 - **`brand_mark`** — `BrandMark`: an OUTSIDE brand's mark, naming the channel a touchpoint
-  happened on — `facebook`, `zalo`, `linkedin`, `x`, `google-meet`. Solid single-colour silhouettes in
+  happened on or the service a connection reaches — `facebook`, `zalo`, `linkedin`, `x`,
+  `google-meet`, `gmail`, `outlook`, `google-drive`. Solid single-colour silhouettes in
   each brand's own hex, not the full-colour logos: a byline draws these at 14–20px and a
   five-colour logo turns to mud there. `size` (default 16) and `muted` (draw in the text colour).
-  The name list is an ALLOWLIST — a channel with no mark will not typecheck, so the call site
-  falls back to a generic `Icon` rather than rendering the wrong company's logo. Not for the app's
+  The name list is an ALLOWLIST — `BRAND_NAMES` is the array and `BrandName` derives from it, so a
+  channel with no mark will not typecheck and the call site falls back to a generic `Icon` rather
+  than rendering the wrong company's logo. Not for the app's
   own glyphs; that is `icon`. `x` is the one mark whose brand colour is BLACK, so it is the one
-  that needs `muted` on a dark ground; the rest carry their own hue either way.
+  that needs `muted` on a dark ground; the rest carry their own hue either way. Where a brand's
+  official mark is a composite (Outlook's envelope-and-O), the entry carries the half that stays
+  legible small — the identifying monogram — because a shape nobody can read is not the mark.
 - **`markdown`** — `Markdown`: the single canonical markdown renderer for chat, apps, and
   `AgentRun`; rich GFM markdown on web with copyable tables, plain-text on
   native; takes a markdown `children` string. **`variant`** decides whose type
@@ -1059,9 +1063,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `DatePicker` outside a FormField must be given `accessibilityLabel` explicitly; range
   formats suffix each half with the locale's start/end-date names.
 - **`switch_button`** — `SwitchButton`: the full-ROW toggle — a `PressableHighlight` row
-  (optional icon + medium title left, `Switch` pinned right) where the whole row IS the
+  (optional leading mark + medium title left, `Switch` pinned right) where the whole row IS the
   switch (`accessibilityRole="switch"`, the inner Switch read-only). The settings-panel/menu
-  row toggle.
+  row toggle. The leading slot takes EITHER `icon` (an `IconName`, the app's own glyph language)
+  or `brand` (a `BrandName`, an outside service's mark); `icon` wins if both are passed. A row
+  naming a third-party service takes `brand` — the two sets are deliberately separate, so a
+  connector row cannot reach for a Lotics glyph to stand in for a company's logo.
 - **`use_form`** — `useForm`: THE batch draft-form state hook — `values` = `initialValues` +
   an edits overlay (a revalidation refreshes untouched fields, no sync effect), `validate`
   (sync/async, gates submit, editing clears the field's error), `onSubmit(values, helpers)`
@@ -1477,6 +1484,15 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   when a slot is passed: `right` is routinely conditional, and an anatomy that flipped on that
   would make two rows in one list press differently. Nothing to opt into — a decorative
   `right` simply stops being part of the press target.
+  **The row OWNS its `title`/`description` pair, so do not hand-roll one beside it.** Both
+  lines are `sm`, `leading="tight"`, no gap between them — the stacked-pair law in
+  [composition.md](./composition.md), applied by the component rather than restated at each
+  call site. It shipped rendering that pair as PROSE (two 24px boxes plus a 2px gap = 12px
+  between the lines, against the 6px the rule prescribes), and the height was sized around
+  that mistake at 64, which left a correctly-sized `md` mark adrift in it; the row is 56 now.
+  A `description` passed as a NODE keeps its own leading — the component only sets it on the
+  string branch, because forcing a line box on somebody else's subtree re-spaces content that
+  may not be a line of text at all.
 - **`table`** — `Table` + `TableRow` + `TableCell`: the paginated high-volume register
   (columns defined once, `sortLabels` localizable; rows are `PressableRow`-based).
   CONTAINER-RESPONSIVE with no prop (measures itself, like `Breakdown`/`DetailTable`): when

package/package.json

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

package/src/brand_mark.tsx

@@ -7,7 +7,18 @@ import { Svg, Path } from "react-native-svg";
  * email that is not tied to one provider. Inventing a mark for those is how a
  * byline ends up claiming a channel the record does not carry.
  */
-export type BrandName = "facebook" | "zalo" | "linkedin" | "x" | "google-meet";
+export const BRAND_NAMES = [
+  "facebook",
+  "zalo",
+  "linkedin",
+  "x",
+  "google-meet",
+  "gmail",
+  "outlook",
+  "google-drive",
+] as const;
+
+export type BrandName = (typeof BRAND_NAMES)[number];
 
 interface Mark {
   /** The brand's own colour. A mark drawn in anything else is not the mark. */
@@ -52,6 +63,29 @@ const MARKS: Record<BrandName, Mark> = {
     color: "#00897B",
     path: "M5.53 2.13 0 7.75h5.53zm.398 0v5.62h7.608v3.65l5.47-4.45c-.014-1.22.031-2.25-.025-3.46-.148-1.09-1.287-1.47-2.236-1.36zM23.1 4.32c-.802.295-1.358.995-2.047 1.49-2.506 2.05-4.982 4.12-7.468 6.19 3.025 2.59 6.04 5.18 9.065 7.76 1.218.671 1.428-.814 1.328-1.64v-13a.828.828 0 0 0-.877-.825zM.038 8.15v7.7h5.53v-7.7zm13.577 8.1H6.008v5.62c3.864-.006 7.737.011 11.58-.009 1.02-.07 1.618-1.12 1.468-2.07v-2.51l-5.47-4.68v3.65zm-13.577 0c.02 1.44-.041 2.88.033 4.31.162.948 1.158 1.43 2.047 1.31h3.464v-5.62z",
   },
+  // The envelope silhouette, in Gmail's red. The full mark is five colours
+  // meeting along the flap's diagonals — at 16px those seams alias into a
+  // brown smear, which is precisely the case the note above is about.
+  gmail: {
+    color: "#EA4335",
+    path: "M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.909 1.528-1.146C21.69 2.28 24 3.434 24 5.457z",
+  },
+  // The bare "O" monogram — an oval ring, drawn as two subpaths of OPPOSITE
+  // winding so the nonzero fill leaves the counter open. Simple Icons' Outlook
+  // path is the envelope-and-O composite, and it was tried here first: at 20px
+  // it collapses into a blue rectangle with no readable feature, and it is not
+  // much better at 64. The O alone is what identifies the brand at a glance and
+  // it is the half that survives the size.
+  outlook: {
+    color: "#0078D4",
+    path: "M12 1.2a8.7 10.8 0 1 0 0 21.6 8.7 10.8 0 1 0 0-21.6ZM12 6.6a4.1 5.4 0 1 1 0 10.8 4.1 5.4 0 1 1 0-10.8Z",
+  },
+  // Drive's triangle, drawn as one silhouette. The three-colour original is the
+  // same aliasing problem as Gmail's, and worse — its colours meet at a point.
+  "google-drive": {
+    color: "#1FA463",
+    path: "M12.01 1.485c-2.082 0-3.754.02-3.743.047.011.024 1.708 3.001 3.774 6.62l3.76 6.574h7.46c.001-.02-1.696-2.998-3.762-6.618l-3.76-6.623zm-4.28.939a5.482 5.482 0 0 0-.309.443L3.71 9.17 0 15.647l1.863 3.209a338.99 338.99 0 0 0 1.914 3.28c.04.045 7.55-13.116 7.55-13.234 0-.045-1.487-2.652-3.305-5.793zM9.97 15.463c-.639 1.099-1.943 3.361-2.9 5.03l-1.737 3.021h15.09c0-.019.848-1.484 1.884-3.259l1.882-3.222H9.97z",
+  },
 };
 
 export interface BrandMarkProps {

package/src/list_item.tsx

@@ -57,15 +57,29 @@ export function ListItem(props: ListItemProps) {
   const body = (
     <>
       {left}
+      {/* A STACKED PAIR, and it was rendered as prose. Both lines are `sm`, so
+          the rungs were never the problem — the LEADING was: two 24px prose line
+          boxes around 14px glyphs leave 5px of empty box above and below each,
+          which is 10px between them, and a `gap: 2` on the container made 12. The
+          composition rule this surface is supposed to follow puts a pair at 6:
+          `leading="tight"` on both body-rung lines and NO gap, because each tight
+          box already contributes 3px a side. Twice the intended distance is what
+          makes a name and its role read as two separate lines rather than one
+          object, which is how the defect gets reported — as "too far apart",
+          never as its cause.
+
+          `tight` goes on the string branch only. A caller passing a NODE owns its
+          own leading, and forcing one on somebody else's subtree would silently
+          re-space a description that is not a line of text at all. */}
       <View style={styles.textContainer}>
         {!!title && (
-          <Text weight="medium" numberOfLines={1} userSelect="none">
+          <Text weight="medium" leading="tight" numberOfLines={1} userSelect="none">
             {title}
           </Text>
         )}
         {!!description &&
           (typeof description === "string" ? (
-            <Text size="sm" color="zinc-500" numberOfLines={1} userSelect="none">
+            <Text size="sm" color="zinc-500" leading="tight" numberOfLines={1} userSelect="none">
               {description}
             </Text>
           ) : (
@@ -157,18 +171,27 @@ function PressRow(props: {
 }
 
 const styles = StyleSheet.create({
+  // 56, not 64. The height was sized around a pair rendered as prose — two 24px
+  // boxes plus a 2px gap is 50, and 64 left 14px of slack the row did not ask
+  // for, which is what made a correctly-sized `md` mark (28px, the documented
+  // rung for a person in a list) look adrift in it. A tight pair is 40, so 56
+  // gives it the same 8-a-side the rest of the kit's rows carry. A title-only
+  // row keeps one 20px line centred in the same box, so the two shapes still
+  // share a beat.
   container: {
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
-    height: 64,
+    height: 56,
     paddingHorizontal: 8,
     marginHorizontal: -8,
     borderRadius: 12,
   },
+  // NO GAP. Each tight line box already contributes 3px above and below its
+  // glyphs, so the pair reads at 6px — a gap here is a third source of space
+  // between two lines meant to read as one object.
   textContainer: {
     flex: 1,
-    gap: 2,
     alignItems: "flex-start",
   },
   selected: {

package/src/switch_button.tsx

@@ -3,16 +3,24 @@ import { Text } from "./text";
 import { Switch, type SwitchProps } from "./switch";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon, type IconName } from "./icon";
+import { BrandMark, type BrandName } from "./brand_mark";
 import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitchButtonProps extends SwitchProps {
   icon?: IconName;
+  /**
+   * A third-party channel's own mark, for a row that names an OUTSIDE service.
+   * Separate from `icon` because the two draw from different sets on purpose —
+   * `Icon` is the app's own glyph language, `BrandMark` a narrow allowlist of
+   * other companies' logos. `icon` wins if both are passed.
+   */
+  brand?: BrandName;
   title: string;
   tooltip?: string;
 }
 
 export function SwitchButton(props: SwitchButtonProps) {
-  const { title, icon, value, tooltip, onChange } = props;
+  const { title, icon, brand, value, tooltip, onChange } = props;
 
   return (
     <PressableHighlight
@@ -33,7 +41,7 @@ export function SwitchButton(props: SwitchButtonProps) {
       aria-checked={!!value}
     >
       <View style={{ flexDirection: "row", gap: 8, alignItems: "center", flex: 1 }}>
-        {!!icon && <Icon name={icon} size={20} />}
+        {icon ? <Icon name={icon} size={20} /> : brand ? <BrandMark name={brand} size={20} /> : null}
         {!!title && (
           <Text weight="medium" userSelect="none">
             {title}