@lotics/ui 45.8.0 → 45.9.0

package/AGENTS.md

@@ -104,12 +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 / 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).
+  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. A product's official full-colour logo is NOT one of these: the
+  kit ships no vendor artwork, so a row that names a product passes its own image into
+  `SwitchButton`'s `leading` slot. → [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/MIGRATION.md

@@ -4,6 +4,24 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 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.
 
+## 45.9.0
+
+**`BrandMark` no longer carries product logos, and `SwitchButton` takes `leading` instead of
+`brand`.** `BRAND_NAMES` drops `gmail`, `outlook` and `google-drive`; the kit's marks are the
+single-colour CC0 silhouettes that NAME a channel — `facebook`, `zalo`, `linkedin`, `x`,
+`google-meet` — and a monochrome stand-in for a product logo reads as a different thing.
+
+Replace `<BrandMark name="gmail" />` with your own image asset. A row that named a product with
+`<SwitchButton brand="gmail" …>` passes it through the new `leading` slot instead, which takes any
+node:
+
+```tsx
+<SwitchButton leading={<Image source={{ uri: logo }} style={{ width: 20, height: 20 }} />} … />
+```
+
+A retired name no longer typechecks, and a bundle compiled against an older kit renders nothing
+where the mark was rather than throwing.
+
 ## 45.5.0
 
 **`InlineSelect` and `InlineMemberSelect` are a `combobox`, not a `button`.** They rest as a

package/docs/catalog.md

@@ -484,17 +484,16 @@ 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 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 — `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
+  happened on — `facebook`, `zalo`, `linkedin`, `x`, `google-meet`. Solid single-colour silhouettes
+  in each brand's own hex, drawn from CC0 geometry. `size` (default 16) and `muted` (draw in the
+  text colour). 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. 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.
+  that needs `muted` on a dark ground; the rest carry their own hue either way. **Not a product
+  logo**: a monochrome stand-in for one reads as a different thing (a red "M" is not Gmail), the kit
+  ships no vendor artwork, and official artwork is not uniformly inlinable anyway — pass your own
+  image to `SwitchButton`'s `leading` slot instead.
 - **`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
@@ -835,13 +834,18 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   rather than a value). Throws when the clipboard is unreachable — never resolve a write
   that did not happen, or the caller confirms a lie. Web-only (native has no
   `navigator.clipboard`).
-- **`back_button`** — `BackButton`: the one go-back control — don't hand-roll it (an
-  `arrow-left` `MenuButton` reads as another nav ITEM, not an exit). `onPress` +
-  `accessibilityLabel` (defaults to `label`, else the locale's `nav.back` — "Back" /
-  "Quay lại"). Bare, it's the chevron-left `IconButton` (lg, secondary) heading a
-  screen/panel; pass **`label`** to name where back GOES ("Danh sách") — the SAME
-  circular glyph with the destination beside it, ONE pressable over disc + words —
-  never an icon button beside unclickable prose.
+- **`back_button`** — `BackButton`: the CIRCULAR go-back control that HEADS a screen or
+  panel — don't hand-roll it (an `arrow-left` `MenuButton` reads as another nav ITEM, not
+  an exit). `onPress` + `accessibilityLabel` (defaults to `label`, else the locale's
+  `nav.back` — "Back" / "Quay lại"). Bare it is the 40px chevron-left disc; pass
+  **`label`** to name where back GOES ("Danh sách") — the SAME disc with the destination
+  beside it, ONE pressable over disc + words, never an icon button beside unclickable
+  prose. It takes no size or colour: one purpose, one look, and both variants draw the
+  one disc so they cannot drift.
+  **A back affordance INSIDE a header row is not this** — beside a drawer's title a 40px
+  disc outweighs the name it belongs to, so that one is a small `IconButton` (see
+  `screen_router` below). The distinction is prominence: this HEADS a surface, that
+  annotates a title.
 - **`link`** — `Link`: the EXTERNAL hyperlink — fixed underline+blue + `role="link"`;
   `onPress` only (the consumer wires the opener).
 - **`text_link`** — `TextLink`: underlined text that NAVIGATES — `href` renders a real
@@ -1074,9 +1078,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   (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. 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.
+  or `leading` (any node); `icon` wins if both are passed. A row naming an outside product passes
+  its logo through `leading`, because the kit ships no vendor artwork of its own.
 - **`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)`

package/package.json

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

package/src/back_button.tsx

@@ -1,9 +1,8 @@
-import { IconButton } from "./icon_button";
 import { View } from "react-native";
 import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { CURSOR_ACTION } from "./control_surface";
+import { CONTROL_HEIGHT, CURSOR_ACTION } from "./control_surface";
 import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
 
@@ -18,26 +17,66 @@ interface BackButtonProps {
   accessibilityLabel?: string;
 }
 
+/**
+ * THE DISC, drawn ONCE for both variants and pressable in neither.
+ *
+ * It used to exist twice: the bare variant delegated to an `IconButton`, the
+ * labelled one hand-rolled the identical circle and restated that component's
+ * spec in a comment — "mirrors IconButton lg/secondary (40px, zinc-100, 20px
+ * zinc-900 glyph)". A spec copied into a comment is a spec that drifts: change
+ * `secondary` and one variant of ONE component follows while the other does not.
+ *
+ * Delegating both to `IconButton` is not the fix and never was. The labelled
+ * form is ONE pressable over the disc AND the words — an `IconButton` inside it
+ * is a button nested in a button, which is why the copy got written in the first
+ * place. So the shared thing is the SURFACE, not the control: inert here, and
+ * whichever pressable wraps it owns the gesture.
+ *
+ * IT BORROWS NOTHING FROM ANOTHER CONTROL. An earlier pass took the glyph ink
+ * from `getButtonIconColor("secondary")`, which reads as sharing until you say it
+ * out loud: this is not a secondary BUTTON, and tying its ink to that ladder
+ * means a change to the button palette silently restyles the back affordance for
+ * a reason no one would connect. The ink is `zinc-900` because that is what this
+ * glyph is.
+ *
+ * `CONTROL_HEIGHT` stays, and is not the same kind of borrowing: it is the
+ * SYSTEM's band height — the promise every 40px control aligns to — not another
+ * component's opinion. Typing `40` here would be the drift, not the reuse.
+ */
+const GLYPH = 20;
+
+function Disc() {
+  return (
+    <View
+      style={{
+        width: CONTROL_HEIGHT,
+        height: CONTROL_HEIGHT,
+        borderRadius: 999,
+        backgroundColor: colors.zinc[100],
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Icon name="chevron-left" size={GLYPH} color={colors.zinc[900]} />
+    </View>
+  );
+}
+
+/**
+ * THE go-back control: a circular glyph that leaves the current screen or panel,
+ * optionally naming where it goes.
+ *
+ * It is one purpose, so it takes no size or colour — a caller reaching for those
+ * wants a different control. In particular a drawer header's small inline arrow
+ * is NOT this: that sits beside a title inside a header row, where a 40px disc
+ * would outweigh the name it belongs to. That one is an `IconButton`, and the
+ * distinction is prominence — this one HEADS a surface, that one annotates a
+ * title.
+ */
 export function BackButton(props: BackButtonProps) {
   const locale = useLoticsLocale();
   const { onPress, label, accessibilityLabel = label ?? locale.nav.back } = props;
-  // Bare — the circular glyph IS the control.
-  if (label === undefined) {
-    return (
-      <IconButton
-        icon="chevron-left"
-        size="lg"
-        color="secondary"
-        accessibilityLabel={accessibilityLabel}
-        onPress={onPress}
-        style={{ alignSelf: "flex-start" }}
-      />
-    );
-  }
-  // Labelled — the SAME circular glyph, the destination named beside it, ONE
-  // pressable pill over both (words you can't press are a lie). The disc
-  // mirrors IconButton lg/secondary (40px, zinc-100, 20px zinc-900 glyph); the
-  // pill takes PressableHighlight's default hover/press wash + focus ring.
+
   return (
     <PressableHighlight
       focusRing
@@ -45,16 +84,28 @@ export function BackButton(props: BackButtonProps) {
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
       onPress={onPress}
-      // Going back ACTS, exactly as the bare variant's `IconButton` does —
-      // without this, one component shows two cursors decided by a label.
-      style={{ cursor: CURSOR_ACTION, flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start", borderRadius: 999, paddingRight: 14 }}
+      // Going back ACTS. One cursor for both variants — a label must not decide
+      // whether the same control looks pressable.
+      //
+      // The pill's own padding exists only when there are words to seat: bare,
+      // the disc IS the target and any padding would inflate it past the 40px
+      // every other control in the band is aligned to.
+      style={{
+        cursor: CURSOR_ACTION,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        alignSelf: "flex-start",
+        borderRadius: 999,
+        paddingRight: label === undefined ? 0 : 14,
+      }}
     >
-      <View style={{ width: 40, height: 40, borderRadius: 999, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
-        <Icon name="chevron-left" size={20} color={colors.zinc[900]} />
-      </View>
-      <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
-        {label}
-      </Text>
+      <Disc />
+      {label === undefined ? null : (
+        <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
+          {label}
+        </Text>
+      )}
     </PressableHighlight>
   );
 }

package/src/brand_mark.tsx

@@ -7,16 +7,7 @@ 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 const BRAND_NAMES = [
-  "facebook",
-  "zalo",
-  "linkedin",
-  "x",
-  "google-meet",
-  "gmail",
-  "outlook",
-  "google-drive",
-] as const;
+export const BRAND_NAMES = ["facebook", "zalo", "linkedin", "x", "google-meet"] as const;
 
 export type BrandName = (typeof BRAND_NAMES)[number];
 
@@ -37,6 +28,15 @@ interface Mark {
  * Path data is Simple Icons (CC0), so the geometry carries no licence of its
  * own; the marks themselves stay the trademarks of their owners and are used
  * here only to NAME the channel a touchpoint happened on.
+ *
+ * A product's OFFICIAL full-colour logo does not belong here, and the reason is
+ * not size — at 20px the real Gmail and Drive artwork reads perfectly well. It
+ * is provenance and shape: official artwork is the vendor's asset rather than
+ * CC0 geometry, and it is not uniformly inlinable — Gmail and Drive are flat
+ * multi-path files, Outlook is fourteen gradients across fifteen paths. A kit
+ * that carried two of them and gave up on the third would be the worst of both.
+ * Those live in the app's own image assets, and a row that wants one passes it
+ * in (`SwitchButton`'s `leading` slot).
  */
 const MARKS: Record<BrandName, Mark> = {
   facebook: {
@@ -63,29 +63,6 @@ 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 {
@@ -112,7 +89,13 @@ export interface BrandMarkProps {
  */
 export function BrandMark(props: BrandMarkProps) {
   const { name, size = 16, muted, testID } = props;
-  const mark = MARKS[name];
+  // A name outside the allowlist does not typecheck, so reaching here means a
+  // deployed app compiled against an older kit that still had the name. Render
+  // nothing rather than dereferencing undefined: a mark is decoration beside a
+  // label that already names the channel, and throwing takes the whole render
+  // tree of an app that is otherwise fine.
+  const mark = MARKS[name] as Mark | undefined;
+  if (!mark) return null;
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" testID={testID}>
       <Path d={mark.path} fill={muted ? "currentColor" : mark.color} />

package/src/switch_button.tsx

@@ -1,26 +1,25 @@
+import type { ReactNode } from "react";
 import { View } from "react-native";
 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.
+   * Anything to draw in the leading slot instead of an `Icon` — a product logo
+   * a row names, which the caller owns because the kit does not ship other
+   * companies' artwork. `icon` wins if both are passed.
    */
-  brand?: BrandName;
+  leading?: ReactNode;
   title: string;
   tooltip?: string;
 }
 
 export function SwitchButton(props: SwitchButtonProps) {
-  const { title, icon, brand, value, tooltip, onChange } = props;
+  const { title, icon, leading, value, tooltip, onChange } = props;
 
   return (
     <PressableHighlight
@@ -41,7 +40,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} /> : brand ? <BrandMark name={brand} size={20} /> : null}
+        {icon ? <Icon name={icon} size={20} /> : (leading ?? null)}
         {!!title && (
           <Text weight="medium" userSelect="none">
             {title}