@lotics/ui 22.3.0 → 23.1.0

package/src/share_or_download.ts

@@ -30,7 +30,7 @@ export type ShareOrDownloadResult =
   | { delivered: "share"; count: number }
   | { delivered: "download"; count: number };
 
-/** "shared" = the sheet completed · "cancelled" = the user dismissed it ·
+/** "shared" = the sheet completed, "cancelled" = the user dismissed it,
  *  "unsupported" = Web Share (files) unavailable. A genuine share failure THROWS. */
 export type ShareFilesResult = "shared" | "cancelled" | "unsupported";
 
@@ -65,7 +65,7 @@ export async function prepareShareFiles(
 /**
  * Share already-fetched File objects via the OS sheet. Call SYNCHRONOUSLY from a
  * user gesture (no awaited fetch before it) so iOS keeps the transient activation.
- * "cancelled" = user dismissed · "unsupported" = no Web Share; a real failure THROWS.
+ * "cancelled" = user dismissed, "unsupported" = no Web Share; a real failure THROWS.
  */
 export async function shareFiles(fileObjs: File[], opts?: { title?: string; text?: string }): Promise<ShareFilesResult> {
   const nav = typeof navigator !== "undefined" ? navigator : undefined;

package/src/step_progress.tsx

@@ -4,7 +4,7 @@ import { Text } from "./text";
 import { useTooltip } from "./tooltip";
 
 export interface StepProgressProps {
-  /** The stages: pass the NAMES (enables the built-in "4/7 · In" caption
+  /** The stages: pass the NAMES (enables the built-in "In (4/7)" caption
    *  and per-segment hover names) or a bare count (bar only). */
   steps: number | string[];
   /** 0-based index of the stage in progress; earlier segments render
@@ -17,7 +17,7 @@ export interface StepProgressProps {
    *  uppercase eyebrow row above the bar, caption right. Omit at card
    *  density where the context already names it. */
   title?: string;
-  /** Caption override for when the current stage needs prose ("In production") instead of the derived "3/6 · SX". */
+  /** Caption override for when the current stage needs prose ("In production") instead of the derived "SX (3/6)". */
   label?: string;
   /** Tone for the caption — `danger` flags a stalled/overdue stage (a stuck
    *  production order) in the FIXED caption spot, so the bar stays consistent
@@ -35,7 +35,7 @@ export interface StepProgressProps {
 
 /**
  * THE compact stage indicator — N equal segments filled through the current
- * stage, with a built-in "4/7 · In" caption when stages are named (hovering
+ * stage, with a built-in "In (4/7)" caption when stages are named (hovering
  * a segment names it). For *countable* stages an item walks through (a
  * production line, a checklist, a pipeline) shown at card/list density.
  *
@@ -55,8 +55,10 @@ export function StepProgress(props: StepProgressProps) {
     label ??
     (names
       ? isComplete
-        ? `${count}/${count} · Complete`
-        : `${Math.max(0, safe + 1)}/${count}${safe >= 0 ? ` · ${names[safe]}` : ""}`
+        ? `Complete (${count}/${count})`
+        : safe >= 0
+          ? `${names[safe]} (${safe + 1}/${count})`
+          : `0/${count}`
       : undefined);
 
   // `progressbar` IS right here — the segments are decoration over one quantity,

package/src/stepper.tsx

@@ -68,7 +68,7 @@ export interface StepProps extends StepPositional {
 }
 
 /**
- * Progress through an ordered sequence — done · current · upcoming on a
+ * Progress through an ordered sequence — done, current, upcoming on a
  * connecting track (horizontal) or spine (vertical). The node encodes STATUS,
  * not identity: a filled dot once reached, a ring with a white centre at the
  * current step (pulsing when `live`), a faint ring for what's ahead, a check for

package/src/task.tsx

@@ -14,7 +14,7 @@ import { TASK_ROW_BAND, TASK_ROW_GAP, taskGutter, taskTitleSlack } from "./task_
  *   <TaskList>
  *     <TaskItem>
  *       <TaskStatus><CheckCircle …/></TaskStatus>
- *       <TaskTitle><InlineTextInput variant="cell" struck={done} …/></TaskTitle>
+ *       <TaskTitle><InlineTextInput variant="bare" struck={done} …/></TaskTitle>
  *       <TaskActions><ActionMenu …/></TaskActions>
  *       <TaskCaption>Waiting on the signed copy</TaskCaption>
  *       <TaskSubRow label="Portal account"><InlineTextInput …/></TaskSubRow>
@@ -81,7 +81,7 @@ import { TASK_ROW_BAND, TASK_ROW_GAP, taskGutter, taskTitleSlack } from "./task_
  * **A value and a sentence are different things.** A `TaskSubRow` holds a NAMED value the reader
  * sets; `TaskCaption` holds a sentence ABOUT the row ("Missing 2 of 6") on its own line under the
  * title. Prose given a label reads as a field nobody can edit. Which is why a sub-row annotates
- * like a record's field does — `description` · `warning` · `error`, the one anatomy in
+ * like a record's field does — `description`, `warning`, `error`, the one anatomy in
  * `field_annotations` — so a fault in ONE field says so on that field instead of being demoted
  * into a sentence about the whole row.
  *
@@ -131,11 +131,11 @@ const TaskListContext = createContext<TaskListContextValue>({
  */
 const SUB_VALUE_MIN = 200;
 /**
- * How far a `variant="cell"` control insets its own text — the kit's `CONTROL_TEXT_INSET` under
+ * How far an inline control insets its own text — the kit's `CONTROL_TEXT_INSET` under
  * this family's name, because a task surface reaches for it constantly. Everything that hangs
  * beneath a row — the caption, a sub-row's label, the detail block — adds the same, so it lines
  * up with the WORDS rather than with the editor's invisible box. A STRING title gets it from
- * `TaskTitle`; only a custom title NODE that is not a `variant="cell"` control has to add it, or
+ * `TaskTitle`; only a custom title NODE that is not an inline control has to add it, or
  * it sits out of line with the editable titles around it.
  */
 export const TASK_TEXT_INSET = CONTROL_TEXT_INSET;
@@ -282,7 +282,7 @@ type TaskTitleProps =
   | { children: ReactNode; struck?: never };
 
 /**
- * The task's identity — an inline editor (`variant="cell"`), or the title text itself.
+ * The task's identity — an inline editor, or the title text itself.
  *
  * Pass a STRING and the title renders on the cell inset with the band's slack above and below
  * it, so it lines up with the editable titles around it AND a title that wraps keeps its first
@@ -379,7 +379,7 @@ interface TaskSubRowProps extends FieldAnnotationProps {
  * own line under the label rather than compressing to a few characters, and on a wide one it
  * FILLS the content box, ending on the same x as the title above it and the ⋯ gutter beside it.
  *
- * It annotates exactly like a `DetailRow` — `description` · `warning` · `error`, one shared
+ * It annotates exactly like a `DetailRow` — `description`, `warning`, `error`, one shared
  * anatomy (`field_annotations`). A field-level fault says so ON THE FIELD; demoting it into a
  * `TaskCaption`, which is a sentence about the ROW, says something different.
  *

package/src/text_input_field.tsx

@@ -13,7 +13,7 @@ import { Ref, useCallback, useState } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
 import { ShortcutBadge } from "./shortcut_badge";
-import { fontFamilyRegular, getInputLineHeight, getInputTextStyle } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, getMultilineInputHeight } from "./text_utils";
 import { useScreenSize } from "./use_screen_size";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { useFormField } from "./form_field";
@@ -34,6 +34,17 @@ interface TextInputFieldProps extends RNTextInputProps {
   /** Accessible name for the clear button. Defaults to the locale's
    *  `textInputField.clear` ("Clear" / "Xóa"). */
   clearLabel?: string;
+  /** The HOST paints the surface — drop this input's own border, fill, focus ring
+   *  AND horizontal padding, so the page draws one box and the text lands on the
+   *  host's inset rather than 8px further in. Set by an inline editor whose field
+   *  carries `actions`: the field's shell owns the surface (so the verbs never
+   *  move between modes) and owns the ring with it.
+   *
+   *  HEIGHT and VERTICAL padding stay — those are what keep the field the same
+   *  size in both modes; the horizontal inset is what has to be surrendered,
+   *  because the host already spent `CONTROL_TEXT_INSET` on it and two insets
+   *  stacked is a visible jump to the right on focus. */
+  seamless?: boolean;
   // DOM-only ARIA attrs not declared on React Native's TextInputProps. They
   // are forwarded verbatim to the underlying web input.
   "aria-controls"?: string;
@@ -45,6 +56,7 @@ export function TextInputField(props: TextInputFieldProps) {
   const locale = useLoticsLocale();
   const {
     style,
+    seamless,
     icon,
     clearable,
     onClear,
@@ -72,7 +84,6 @@ export function TextInputField(props: TextInputFieldProps) {
   if (ariaAutocomplete !== undefined) webAriaAttrs["aria-autocomplete"] = ariaAutocomplete;
 
   const { small } = useScreenSize();
-  const lineHeight = getInputLineHeight(small);
   const binding = useFormField();
   // Text-like input: ring on ANY focus (browsers treat typing-capable fields as
   // focus-visible even on pointer focus), so a clicked field shows its ring.
@@ -87,7 +98,7 @@ export function TextInputField(props: TextInputFieldProps) {
 
   const minHeight =
     numberOfLines && numberOfLines > 1
-      ? numberOfLines * lineHeight + 16
+      ? getMultilineInputHeight(numberOfLines, small)
       : undefined;
 
   const autoGrowResult = useAutoGrowHeight({
@@ -167,7 +178,8 @@ export function TextInputField(props: TextInputFieldProps) {
           showShortcut && shortcutWidth > 0 && { paddingRight: SHORTCUT_INSET + shortcutWidth },
           hovered && editable && { borderColor: HOVER_BORDER },
           style,
-          focusVisible && { boxShadow: FOCUS_RING },
+          focusVisible && !seamless && { boxShadow: FOCUS_RING },
+          seamless && styles.seamless,
         ]}
         multiline={(numberOfLines && numberOfLines > 1) || multiline}
         focusable={editable}
@@ -227,6 +239,11 @@ const styles = StyleSheet.create({
     fontFamily: fontFamilyRegular,
     letterSpacing: -0.4,
   },
+  // The HOST paints the surface AND owns the text inset. Height and vertical
+  // padding stay (they hold the field's size); the horizontal padding goes,
+  // because the host already spent CONTROL_TEXT_INSET and two insets stacked
+  // shift the text 8px right the moment the field focuses.
+  seamless: { borderColor: "transparent", backgroundColor: "transparent", paddingHorizontal: 0 },
   disabled: {
     color: colors.zinc["400"],
     outlineStyle: "none" as unknown as "solid",

package/src/text_utils.ts

@@ -1,5 +1,6 @@
 import { Platform, TextStyle } from "react-native";
 import { colors } from "./colors";
+import { multilineInputHeight } from "./input_metrics";
 
 export type TextColor =
   | "default"
@@ -26,7 +27,7 @@ export function getTextColor(color?: TextColor): string {
     case "zinc-500":
       return colors.zinc["500"];
     // The disabled ink — light enough that a control reads inert at a glance
-    // (muted/600 still reads as body ink on a zinc-50 chip).
+    // (muted/600 still reads as body ink on the control's resting surface).
     case "zinc-400":
       return colors.zinc["400"];
     case "inverted":
@@ -112,6 +113,11 @@ export function getInputTextStyle(): TextStyle {
  *
  * @param isSmallScreen - Whether the screen is small (mobile). Get this from useScreenSize().small
  */
+/** {@link multilineInputHeight} at this platform's input line height. */
+export function getMultilineInputHeight(numberOfLines: number, isSmallScreen: boolean): number {
+  return multilineInputHeight(numberOfLines, getInputLineHeight(isSmallScreen));
+}
+
 export function getInputLineHeight(isSmallScreen: boolean): number {
   if (Platform.OS !== "web") {
     return INPUT_LINE_HEIGHT_DESKTOP;

package/src/linked_record_box.tsx

@@ -1,157 +0,0 @@
-import { type ReactNode } from "react";
-import { View, StyleSheet } from "react-native";
-import { PressableRow } from "./pressable_row";
-import { PressDoor } from "./press_door";
-import { Text } from "./text";
-import { Icon, type IconName } from "./icon";
-import { colors } from "./colors";
-import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
-
-/** One reference fact. `V` is the value the variant admits — text under a door, any node without one. */
-interface LinkedRecordFact<V = ReactNode> {
-  label: string;
-  value: V;
-}
-
-interface LinkedRecordBoxBaseProps {
-  /** The linked record's kind glyph (building-2 for a company, file-text for a record…). */
-  icon: IconName;
-  /** The linked record's display name. */
-  name: string;
-  /** A secondary identity line — a code, tax id, country, or "<desk> record". */
-  subtitle?: string;
-  /** Width of the facts' label column (default 80). Widen for longer labels. */
-  factLabelWidth?: number;
-  /** The verbs, in a hairline-fenced footer at the bottom of the box, lifted above the door's
-   *  hit area. Convention: destructive LEFT, go-to RIGHT (a `<View style={{ flex: 1 }} />`
-   *  spacer between). The divider is drawn automatically when actions are present. Supplied by
-   *  the consumer so the labels stay localized and the verb set fits the link. */
-  actions?: ReactNode;
-}
-
-/** The box that OPENS — the whole surface is the door into the linked record's own detail. */
-interface LinkedRecordBoxDoorProps extends LinkedRecordBoxBaseProps {
-  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
-  onOpen: () => void;
-  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
-  doorLabel: string;
-  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). TEXT only
-   *  (`""` renders "—"): the box is one press target, so the only controls it may hold are the
-   *  `actions` verbs, which the footer fences off and lifts above the door. A fact the reader
-   *  must EDIT belongs on the linked record's own page — that is what the door is for. */
-  facts?: LinkedRecordFact<string>[];
-}
-
-/** The box with nothing to open — the linked record has no detail surface of its own. */
-interface LinkedRecordBoxStaticProps extends LinkedRecordBoxBaseProps {
-  /** Absent by construction. Typed `never` rather than left off so `doorLabel` can never arrive
-   *  without a handler — a named door that goes nowhere. */
-  onOpen?: never;
-  doorLabel?: never;
-  /** Reference facts, stacked VERTICALLY. A string renders as text (`""` → "—"); a NODE renders
-   *  as given (no placeholder), so a fact can carry its own inline editor — safe here precisely
-   *  because nothing about this box presses. */
-  facts?: LinkedRecordFact[];
-}
-
-type LinkedRecordBoxProps = LinkedRecordBoxDoorProps | LinkedRecordBoxStaticProps;
-
-/**
- * A LINKED RECORD shown for reference — a bordered box scoping ANOTHER record's data
- * (identity glyph · name · facts). Use it wherever one record points at another (a shipment's
- * customer, an invoice's party, a case's sibling); the picker / empty-state that REASSIGNS the
- * link is the consumer's, shown in place of the box.
- *
- * `onOpen` picks the variant:
- *
- * - **With `onOpen`** (+ `doorLabel`) the WHOLE box is a keyboard-accessible door into the
- *   record's detail. Its facts are TEXT, and the `actions` footer is the one place a control
- *   may live — everything else is press-through to the door.
- * - **Without it** the box is a STATIC reference card: no door, no tab stop, no pointer, nothing
- *   announced as a button; the only interactive parts are `actions` and whatever a fact node
- *   holds. This is the shape for a record with NO page of its own — there is nothing to open, so
- *   the box IS where its values are read and edited, and an inline editor in a fact is honest.
- *
- * The a11y contract the door variant enforces (the error-prone part, hence a primitive): a
- * container with interactive descendants must NEVER be `role="button"` (invalid HTML). So the
- * box is a role-less `PressableRow`, a `PressDoor` sibling carries the tab stop / accessible
- * name / focus ring, and the interior verbs lift above it via `zIndex`.
- */
-export function LinkedRecordBox(props: LinkedRecordBoxProps) {
-  const { icon, name, subtitle, factLabelWidth = 80, actions } = props;
-  // A door box's facts are strings, and a string IS a ReactNode — so both variants render
-  // through one path typed at the wider value.
-  const facts: LinkedRecordFact[] = props.facts ?? [];
-  const body = (
-    <>
-      <View style={styles.identity}>
-        <View style={styles.glyph}>
-          <Icon name={icon} size={17} color={colors.zinc[600]} />
-        </View>
-        <View style={{ flex: 1, minWidth: 0 }}>
-          <Text size="sm" weight="medium" numberOfLines={1}>{name}</Text>
-          {subtitle ? <Text size="xs" color="muted" numberOfLines={1}>{subtitle}</Text> : null}
-        </View>
-      </View>
-      {facts.length > 0 ? (
-        <View style={{ gap: 6 }}>
-          {facts.map((f) => {
-            // THE ALIGNMENT LAW, the same one `DetailRow` runs on: the fact TOP-aligns and each
-            // cell centres within the first CONTROL LINE. A node value brings the kit's control
-            // band (an inline editor is 40 tall, a chip less), so both cells claim it — without
-            // it the label `Text`, stretched to the row, printed its words at the band's TOP,
-            // a half-band above the value it names. A STRING value has no band: label and value
-            // are the same 20px line, so they sit at the row's top and a long value that wraps
-            // still tops out level with its label.
-            const banded = typeof f.value !== "string";
-            return (
-              <View key={f.label} style={styles.fact}>
-                <View style={[{ width: factLabelWidth }, banded && styles.bandedCell]}>
-                  <Text size="sm" color="muted">{f.label}</Text>
-                </View>
-                {banded ? (
-                  // A node prints as authored — the "—" placeholder is a TEXT affordance, and a
-                  // control renders its own empty state.
-                  <View style={[{ flex: 1, minWidth: 0 }, styles.bandedCell]}>{f.value}</View>
-                ) : (
-                  <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
-                )}
-              </View>
-            );
-          })}
-        </View>
-      ) : null}
-      {actions ? (
-        <>
-          {/* full-bleed hairline fencing the verb footer off from the facts */}
-          <View style={styles.divider} />
-          <View style={styles.actions}>{actions}</View>
-        </>
-      ) : null}
-    </>
-  );
-
-  // Nothing to open → a plain View, so the box takes no tab stop, announces no role, and paints
-  // no pointer/hover promise of a destination it doesn't have.
-  if (!props.onOpen) return <View style={styles.box}>{body}</View>;
-
-  return (
-    <PressableRow onPress={props.onOpen} style={styles.box}>
-      <PressDoor accessibilityLabel={props.doorLabel} onPress={props.onOpen} />
-      {body}
-    </PressableRow>
-  );
-}
-
-const styles = StyleSheet.create({
-  box: { flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingTop: 14, paddingBottom: 10, gap: 12 },
-  identity: { flexDirection: "row", alignItems: "center", gap: 10 },
-  glyph: { width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" },
-  fact: { flexDirection: "row", gap: 10, alignItems: "flex-start" },
-  // A cell on the control band: exactly `minHeight` tall for a one-line label / a short chip,
-  // and taller content (a wrapped label, a stack of controls) tops out level instead of being
-  // dragged toward the block's centre.
-  bandedCell: { minHeight: INLINE_CONTROL_HEIGHT, justifyContent: "center" },
-  divider: { height: 1, backgroundColor: colors.zinc[100], marginHorizontal: -16 },
-  actions: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, zIndex: 1 },
-});