@lotics/ui 45.6.1 → 45.8.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

@@ -165,14 +165,22 @@ in `actions`),
 the product's own knowledge docs use, not a raw textarea. It does NOT swap: the editor
 is mounted at rest and merely gains a draft on focus, so focusing moves nothing and
 the prose stays SELECTABLE rather than sitting under a button. Its toolbar is off for
-that reason — a band that appears with the edit pushes everything under it down.
+that reason — a band that appears with the edit pushes everything under it down — and it
+passes its **`variant`** THROUGH to the editor, which is what actually draws the box:
+the frame paints no surface here, so a variant that stopped at it stopped at nothing and
+every markdown field wore the document sheet, 4px right of the plain-text field above it.
 **`numberOfLines`** is the reserve, as everywhere else in the family); a
 READ-ONLY field in that same column uses `InlineStatic` (matches the editor box exactly, no
 input chrome, so it aligns pixel-for-pixel). **`MarkdownEditor`** is that editor standalone — a WYSIWYG whose value stays a plain
 markdown string, with a formatting toolbar as a SIBLING of the field (what the border
 encloses is the document; the controls that act on it sit outside it). Web is
 ProseMirror via `@lotics/markdown-editor`; native falls back to raw-text editing, and
-the platform-neutral `MarkdownEditorProps` is what stops the two drifting. Wrap it in a
+the platform-neutral `MarkdownEditorProps` is what stops the two drifting. **`variant`**
+is `"document"` (the default soft sheet) or the two FIELD states, `"framed"` / `"bare"`,
+DERIVED from `InlineEditVariant` so they cannot drift from the rest of the family. A field
+takes the control's corner and the control's text inset instead of the sheet's. The default
+is NAMED rather than left as absence: an optional prop whose omission is a distinct third
+mode reads exactly backwards to anyone who knows `TextInputField.variant`. Wrap it in a
 label with **`FormMarkdownEditor`**. Pass **`accessibilityLabel`** whenever the visible
 label is a sibling rather than a wrapping `FormField` — a `DetailRow`, an inline
 editor's frame — or the editable surface is an unnamed text box. A stack of labelled
@@ -476,13 +484,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 +1071,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)`

package/docs/data_entry.md

@@ -32,7 +32,11 @@ in [the templates](./templates.md) (`examples/tpl_*.tsx`).
 **The right-input-per-field law.** A field gets the control its SHAPE wants, never a default
 text box — and on a record surface radio/checkbox render as PERSISTENT controls (the control
 is the best display of the value; prose-shaped values and registry picks stay inline
-editors). Rich `InlineSelect` options carry a description line (`renderOptionContent` — it
+editors). **A MARKDOWN-typed field takes `InlineMarkdown`**, never `InlineTextInput`: the
+plain input prints the syntax it stores, so a reader sees `**` where every other surface
+showing that value renders it. It hides in the gap between two states of one field — the
+value is formatted wherever it is read-only and raw only where it is EDITABLE, which is one
+row, and looks like a quirk of that row rather than the wrong control. Rich `InlineSelect` options carry a description line (`renderOptionContent` — it
 shows in the resting row too; the `data` generic types option payloads). A DEPENDENT field
 renders only while its parent value makes it real — never a disabled ghost row. Worked rows:
 `tpl_record`'s Classification group.
@@ -145,6 +149,24 @@ over the first. **When "the layout must not move" is a requirement rather than a
 element is the only thing that delivers it** — a swap can be made to look stable, never to be it. So
 the editor is mounted at rest and gains a draft on focus, and the per-field cost is paid on purpose.
 If a screen ever holds dozens of these, the answer is fewer markdown fields on it, not a swap.
+
+**`variant` has to reach whatever actually DRAWS the box.** `InlineEditFrame` paints no surface on
+the path this field takes — it has no `actions` — so the editor's own frame is the field's frame,
+and a `variant` that stops at the wrapper stops at nothing: `bare` bought no change at all, and
+every markdown field wore the document sheet whatever the caller asked for. So `MarkdownEditor`
+takes the same `"framed" | "bare"` axis as `TextInputField`, and `InlineMarkdown` passes it through.
+
+**The half that is easy to miss is the INSET, not the border.** A document sheet insets its prose
+further than a control does (13px against `CONTROL_TEXT_INSET`'s 9), so an editor serving as a
+field lands 4px right of the plain-text field stacked directly above it — a ragged left edge inside
+one card, with nothing on screen naming the cause. A field variant is therefore what makes the
+editor a FIELD: it takes the control's corner (`CONTROL_RADIUS`) and the control's inset with it.
+The third value, `"document"`, is the default and every standalone surface in the product — and it
+is a NAMED value rather than an absence, because an optional prop whose omission is a distinct
+third mode reads backwards to anyone who knows `TextInputField.variant`, where omitting it gives
+you `"framed"`. `seamless` is the different case and not this one: that surrenders the surface to a
+host that draws it, and here there is no host — `InlineEditFrame` paints one only when it also owns
+the verbs, so with none the CHILD owns the surface.
 **A LINK does not swap**: marking a URL changes its ink, not its characters, so `InlineTextInput`
 takes a **`link`** treatment on its single `<input>` rather than swapping in a `TextLink`. Pressing
 the field still edits — an `Open` `InlineButton` in `actions` is how you reach the destination,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "45.6.1",
+  "version": "45.8.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/inline_markdown.tsx

@@ -81,6 +81,12 @@ export function InlineMarkdown(props: InlineMarkdownProps) {
         onFocus={edit.begin}
         onBlur={() => void edit.commit()}
         toolbar={false}
+        // THE FIELD'S FRAME IS THIS EDITOR'S OWN. `InlineEditFrame` draws no
+        // surface on the path this field takes (it has no `actions`), so the
+        // caller's `variant` has to reach the editor or it reaches nothing —
+        // which is what made a `bare` markdown field draw a document sheet
+        // anyway, 4px right of the plain-text field stacked above it.
+        variant={variant ?? "framed"}
         placeholder={placeholder}
         numberOfLines={numberOfLines}
         disabled={disabled}

package/src/markdown_editor.css

@@ -37,6 +37,46 @@
   opacity: 0.6;
 }
 
+/* THE TWO FIELD VARIANTS. Everything above is the `document` default and stays
+   the default: a standalone editor is a page's subject, and there are far more
+   of those than there are markdown FIELDS.
+
+   Both field variants are named explicitly rather than matched as "has a
+   variant at all". `document` is a real value that reaches the DOM too, so a
+   bare `[data-variant]` selector would catch the sheet and re-inset it — the
+   attribute says WHICH of three, never whether. */
+.md-editor[data-variant="framed"],
+.md-editor[data-variant="bare"] {
+  border-radius: 10px;
+}
+
+.md-editor[data-variant="framed"] > .md-editor-content,
+.md-editor[data-variant="bare"] > .md-editor-content {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+/* The two numbers the field variants move are the KIT's, not this file's:
+   `CONTROL_RADIUS` (10) above replaces the sheet's 16 — a control corner, not a
+   page corner — and the text inset drops to `CONTROL_TEXT_INSET` (9) = a 1px
+   border plus 8px of padding, replacing the sheet's 13.
+
+   That second one is the whole visible defect this exists for: a document
+   insets its prose further than a control does, so an editor serving as a field
+   while keeping the sheet's inset lands 4px right of the plain-text field
+   stacked directly above it in the same card.
+
+   Vertical padding is untouched — a control's 40px height is governed by
+   `minHeight` elsewhere, and prose here is multi-line by definition.
+
+   BARE additionally has no ground and no edge at REST. The hover border and the
+   focus ring above still apply: a bare field draws its own frame, it just does
+   not draw it until you reach for it. */
+.md-editor[data-variant="bare"] {
+  border-color: transparent;
+  background-color: transparent;
+}
+
 .md-editor-content {
   flex: 1 1 auto;
   /* position:relative anchors the absolutely-positioned gap cursor. */

package/src/markdown_editor.tsx

@@ -7,7 +7,7 @@ import type { MarkdownEditorProps } from "./markdown_editor_props";
  * edited as raw text.
  */
 export function MarkdownEditor(props: MarkdownEditorProps) {
-  const { value, onChangeText, onBlur, onFocus, placeholder, numberOfLines, disabled, autoFocus, accessibilityLabel, testID } =
+  const { value, onChangeText, onBlur, onFocus, variant, placeholder, numberOfLines, disabled, autoFocus, accessibilityLabel, testID } =
     props;
 
   return (
@@ -19,6 +19,12 @@ export function MarkdownEditor(props: MarkdownEditorProps) {
       onFocus={onFocus}
       placeholder={placeholder}
       numberOfLines={numberOfLines ?? 6}
+      // The two FIELD variants pass straight through — they are this input's
+      // own prop and mean the same thing here as on web. `"document"` has no
+      // native counterpart: the soft sheet is a web-only treatment and there is
+      // no raw-text equivalent of it, so a document editor falls back to this
+      // input's own default frame rather than inventing one.
+      variant={variant === "document" ? undefined : variant}
       multiline
       autoGrow
       disabled={disabled}

package/src/markdown_editor.web.tsx

@@ -15,7 +15,7 @@ import { MarkdownToolbar } from "./markdown_toolbar.web";
  * plain markdown string. The ProseMirror engine lives in `@lotics/markdown-editor`.
  */
 export function MarkdownEditor(props: MarkdownEditorProps) {
-  const { value, onChangeText, onBlur, onFocus, toolbar = true, placeholder, numberOfLines, disabled, autoFocus, accessibilityLabel, testID } =
+  const { value, onChangeText, onBlur, onFocus, toolbar = true, variant = "document", placeholder, numberOfLines, disabled, autoFocus, accessibilityLabel, testID } =
     props;
 
   const hostRef = useRef<HTMLDivElement>(null);
@@ -82,6 +82,7 @@ export function MarkdownEditor(props: MarkdownEditorProps) {
         className="md-editor"
         data-testid={testID}
         data-disabled={disabled ? "true" : undefined}
+        data-variant={variant}
         style={{ minHeight }}
       />
     </>

package/src/markdown_editor_props.ts

@@ -1,3 +1,22 @@
+import type { InlineEditVariant } from "./inline_edit";
+
+/**
+ * What this editor IS, which decides the box it draws.
+ *
+ * DERIVED from `InlineEditVariant` rather than spelled out, so the two field
+ * states cannot drift from the rest of the `Inline*` family — this editor draws
+ * its own surface for the same reason every other no-verbs inline control does
+ * (`InlineEditFrame` paints one only when it also owns the ✓/✕ verbs), so it has
+ * to answer the same question in the same words.
+ *
+ * `"document"` is the third state and the DEFAULT, and it is named rather than
+ * left as absence on purpose: an optional two-value prop whose omission is a
+ * distinct third mode is a trap — nothing in the type says so, and the reader
+ * who knows `TextInputField.variant` (where omitting it means `"framed"`) reads
+ * it exactly backwards.
+ */
+export type MarkdownEditorVariant = "document" | InlineEditVariant;
+
 /**
  * Shared prop contract for the markdown editor. Declared platform-neutrally so
  * the web (`markdown_editor.web.tsx`) and native (`markdown_editor.tsx`)
@@ -17,6 +36,24 @@ export interface MarkdownEditorProps {
    * always there and shifts nothing, so it stays on.
    */
   toolbar?: boolean;
+  /**
+   * `"document"` (the default) is a soft 16px sheet — a knowledge doc, a
+   * settings screen, anywhere the editor is the page's subject.
+   *
+   * `"framed"` and `"bare"` make it a FIELD, and mean there what they mean on
+   * every other inline control: an edge at rest, or no edge until hover. Both
+   * also pull the text inset in to `CONTROL_TEXT_INSET`, which is the half
+   * that is easy to miss — a document insets its prose further than a control
+   * does, so an editor serving as a field while keeping the sheet's inset sits
+   * 4px right of the plain-text field stacked above it.
+   *
+   * The editor draws this itself rather than taking it from a host, because
+   * `InlineEditFrame` paints a surface only when it also owns the ✓/✕ verbs;
+   * with none, the CHILD owns the surface. That is the same contract
+   * `TextInputField` answers with its own `variant`, and the reason `seamless`
+   * is the wrong lever here — nothing is drawing a box to surrender to.
+   */
+  variant?: MarkdownEditorVariant;
   placeholder?: string;
   numberOfLines?: number;
   disabled?: boolean;

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}