@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_tower.tsx

@@ -0,0 +1,356 @@
+import { useMemo, useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, type ColorName } from "@lotics/ui/colors";
+import { ActionMenu } from "@lotics/ui/action_menu";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { Heatmap, type HeatmapCell } from "@lotics/ui/heatmap";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { StatusGrid, StatusLegend } from "@lotics/ui/status_grid";
+import { Timeline } from "@lotics/ui/timeline";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Control tower — continuous monitoring of hundreds of live
+// units (machines, gates, chargers, sensors). Three bands answer the three
+// ops questions in order: KPI strip + StatusGrid = "is everything OK right
+// now?" (scan for red; the legend drills a state), exceptions rail =
+// "where do I look first?" (severity, then longest unresolved), Heatmap =
+// "when/where does it cluster?" (pressing a cell explains the day). Cells
+// and exception rows open the SAME sequenced unit drawer.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// One semantic reference per state — a palette family NAME. Every weight
+// (grid cell, legend dot, the drawer Badge, the exception-rail dot) derives
+// its shade from this; nothing carries a raw hex.
+const STATES = [
+  { key: "running", label: "Running", color: "emerald" },
+  { key: "idle", label: "Idle", color: "zinc" },
+  { key: "maintenance", label: "Maintenance", color: "blue" },
+  { key: "warning", label: "Warning", color: "amber" },
+  { key: "down", label: "Down", color: "red" },
+] as const satisfies readonly { key: string; label: string; color: ColorName }[];
+
+type StateKey = (typeof STATES)[number]["key"];
+
+const SITES = [
+  { key: "eastport", label: "Eastport", count: 78 },
+  { key: "northgate", label: "Northgate", count: 64 },
+  { key: "riverside", label: "Riverside", count: 58 },
+  { key: "southbay", label: "Southbay", count: 48 },
+] as const;
+
+type SiteKey = (typeof SITES)[number]["key"];
+
+interface Unit {
+  key: string;
+  label: string;
+  state: StateKey;
+  site: SiteKey;
+  model: string;
+  serviceHours: number;
+  message?: string;
+  ageMin?: number;
+}
+
+// Deterministic mock fleet — integer hashing, stable across reloads.
+function hash(i: number, salt: number): number {
+  let x = (i + 1) * 2654435761 + salt * 40503;
+  x = ((x >>> 16) ^ x) * 0x45d9f3b;
+  x = ((x >>> 16) ^ x) * 0x45d9f3b;
+  return (x >>> 16) % 1000;
+}
+
+function pick<T>(i: number, salt: number, weighted: [T, number][]): T {
+  const total = weighted.reduce((s, [, w]) => s + w, 0);
+  let roll = hash(i, salt) % total;
+  for (const [item, w] of weighted) {
+    if (roll < w) return item;
+    roll -= w;
+  }
+  return weighted[0][0];
+}
+
+const MODELS = ["HX-300", "HX-450", "LT-90", "RS-12"];
+const DOWN_MSGS = ["Offline — no heartbeat", "Drive fault", "E-stop engaged"];
+const WARN_MSGS = ["Temperature high", "Hydraulic pressure low", "Service overdue", "Battery low"];
+
+const UNITS: Unit[] = (() => {
+  const units: Unit[] = [];
+  let i = 0;
+  for (const site of SITES) {
+    for (let n = 0; n < site.count; n++, i++) {
+      const state = pick<StateKey>(i, 1, [["running", 66], ["idle", 16], ["maintenance", 6], ["warning", 7], ["down", 3]]);
+      const unit: Unit = {
+        key: `EQ-${String(i + 1).padStart(3, "0")}`,
+        label: `EQ-${String(i + 1).padStart(3, "0")}`,
+        state,
+        site: site.key,
+        model: MODELS[hash(i, 2) % MODELS.length],
+        serviceHours: 40 + (hash(i, 3) % 460),
+      };
+      if (state === "down") {
+        unit.message = DOWN_MSGS[hash(i, 4) % DOWN_MSGS.length];
+        unit.ageMin = 5 + (hash(i, 5) % 170);
+      } else if (state === "warning") {
+        unit.message = WARN_MSGS[hash(i, 4) % WARN_MSGS.length];
+        unit.ageMin = 10 + (hash(i, 5) % 320);
+      }
+      units.push(unit);
+    }
+  }
+  return units;
+})();
+
+// Exceptions: severity first, then longest unresolved — the triage order.
+const EXCEPTIONS = UNITS.filter((u) => u.state === "down" || u.state === "warning").sort(
+  (a, b) => (a.state === b.state ? (b.ageMin ?? 0) - (a.ageMin ?? 0) : a.state === "down" ? -1 : 1),
+);
+
+// Alarm history: sites × last 14 days, with a deliberate hot streak at
+// Northgate so the heatmap has a story to drill.
+const DAYS = ["30/05", "31/05", "01/06", "02/06", "03/06", "04/06", "05/06", "06/06", "07/06", "08/06", "09/06", "10/06", "11/06", "12/06"];
+const ALARM_VALUES = SITES.map((site, r) =>
+  DAYS.map((_, c) => {
+    const base = hash(r * 14 + c, 6) % 6;
+    return site.key === "northgate" && c >= 9 ? base + 5 + (hash(c, 7) % 6) : base;
+  }),
+);
+
+const stateOf = (k: StateKey) => STATES.find((s) => s.key === k)!;
+const siteOf = (k: SiteKey) => SITES.find((s) => s.key === k)!;
+
+const formatAge = (min: number) => (min >= 60 ? `${Math.floor(min / 60)}h ${min % 60}m` : `${min}m`);
+
+function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 28 }}>
+      <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
+      {children}
+    </View>
+  );
+}
+
+/** Which list the drawer walks: the grid scan or the exceptions rail. */
+type OpenRef = { list: "grid" | "exceptions"; idx: number };
+
+export function TplTower() {
+  const [stateFilter, setStateFilter] = useState<string | null>(null);
+  const [open, setOpen] = useState<OpenRef | null>(null);
+  const [hotCell, setHotCell] = useState<HeatmapCell | null>(null);
+
+  // The grid walk follows the visible slice: all units in site order, or
+  // only the drilled state's units when the legend has a selection.
+  const gridWalk = useMemo(
+    () => (stateFilter ? UNITS.filter((u) => u.state === stateFilter) : UNITS),
+    [stateFilter],
+  );
+  const walk = open?.list === "exceptions" ? EXCEPTIONS : gridWalk;
+  const unit = open !== null ? walk[open.idx] : null;
+
+  const running = UNITS.filter((u) => u.state === "running").length;
+  const maintenance = UNITS.filter((u) => u.state === "maintenance").length;
+  const availability = Math.round(((running + UNITS.filter((u) => u.state === "idle").length) / UNITS.length) * 100);
+  const oldest = EXCEPTIONS.reduce((m, u) => Math.max(m, u.ageMin ?? 0), 0);
+
+  const hotValue = hotCell
+    ? ALARM_VALUES[SITES.findIndex((s) => s.key === hotCell.row)]?.[DAYS.indexOf(hotCell.col)] ?? 0
+    : 0;
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
+        {/* header band */}
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Control tower</Text>
+          <Text size="sm" color="muted">Every unit's live state — scan for red, work the exceptions, read the pattern</Text>
+        </View>
+
+        {/* fleet health — cross-cutting numbers, not a mirror of the legend */}
+        <KPIStrip
+          items={[
+            { label: "Running now", value: running, format: "number", caption: `of ${UNITS.length} units` },
+            { label: "Availability", value: availability, format: "percentage", info: "Share of the fleet ready to work — running or idle. Down and maintenance units are excluded." },
+            { label: "Active alarms", value: EXCEPTIONS.length, format: "number", tone: "danger", caption: `oldest ${formatAge(oldest)}`, info: "Down and warning units, triaged in the exceptions rail — severity first, then longest unresolved." },
+            { label: "In maintenance", value: maintenance, format: "number", caption: "planned work" },
+          ]}
+        />
+
+        <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch", flexWrap: "wrap" }}>
+          {/* live-state scan */}
+          <Card style={{ padding: 0, flexGrow: 2, flexBasis: 560 }}>
+            <CardHeader>
+              <CardHeaderTitle info="One cell per unit, colored by live state. Press a legend state to isolate it across all sites; press a cell to open the unit.">
+                Live unit status
+              </CardHeaderTitle>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16, gap: 16 }}>
+              <StatusLegend
+                items={UNITS}
+                states={STATES.map((s) => ({ key: s.key, label: s.label, color: s.color }))}
+                selectedKey={stateFilter}
+                onSelect={(k) => { setStateFilter(k); setOpen(null); }}
+              />
+              {SITES.map((site) => {
+                const siteUnits = UNITS.filter((u) => u.site === site.key);
+                return (
+                  <View key={site.key} style={{ gap: 8 }}>
+                    <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
+                      <Text size="xs" color="muted" transform="uppercase">{site.label}</Text>
+                      <Text size="xs" color="muted" tabular>{siteUnits.length}</Text>
+                    </View>
+                    <StatusGrid
+                      items={siteUnits}
+                      states={STATES.map((s) => ({ key: s.key, label: s.label, color: s.color }))}
+                      selectedState={stateFilter}
+                      activeKey={unit?.key ?? null}
+                      onPressItem={(key) => {
+                        const idx = gridWalk.findIndex((u) => u.key === key);
+                        if (idx >= 0) setOpen({ list: "grid", idx });
+                      }}
+                    />
+                  </View>
+                );
+              })}
+            </View>
+          </Card>
+
+          {/* exception triage */}
+          <Card style={{ padding: 0, flexGrow: 1, flexBasis: 340 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Every down or warning unit — severity first, then longest unresolved. Press a row to open the unit; ⋯ to acknowledge or assign.">
+                Active exceptions
+              </CardHeaderTitle>
+            </CardHeader>
+            <View style={{ flex: 1, paddingVertical: 4 }}>
+              {EXCEPTIONS.slice(0, 12).map((u, i) => (
+                <View key={u.key}>
+                  {i > 0 ? <Divider /> : null}
+                  <PressableRow
+                    onPress={() => setOpen({ list: "exceptions", idx: i })}
+                    selected={open?.list === "exceptions" && unit?.key === u.key}
+                    style={{ gap: 6 }}
+                  >
+                    <Pressable
+                      accessibilityRole="button"
+                      accessibilityLabel={`Open ${u.key}: ${u.message}`}
+                      onPress={() => setOpen({ list: "exceptions", idx: i })}
+                      style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 10, minHeight: 44 }}
+                    >
+                      <View style={{ width: 8, height: 8, borderRadius: 999, backgroundColor: solid(stateOf(u.state).color) }} />
+                      <Text size="sm" weight="medium" tabular style={{ width: 58 }}>{u.key}</Text>
+                      <Text size="sm" numberOfLines={1} style={{ flex: 1 }}>{u.message}</Text>
+                      <Text size="xs" tabular color={(u.ageMin ?? 0) > 60 ? "danger" : "muted"}>
+                        {formatAge(u.ageMin ?? 0)}
+                      </Text>
+                    </Pressable>
+                    <ActionMenu
+                      accessibilityLabel={`Actions for ${u.key}`}
+                      items={[
+                        { key: "ack", label: "Acknowledge", icon: "check", onPress: () => {} },
+                        { key: "assign", label: "Assign technician", icon: "user-check", onPress: () => {} },
+                        { key: "mute", label: "Mute alarm", icon: "ban", danger: true, onPress: () => {} },
+                      ]}
+                    />
+                  </PressableRow>
+                </View>
+              ))}
+            </View>
+            <CardFooter>
+              <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+                {`12 of ${EXCEPTIONS.length} · the drawer's › walks the full queue`}
+              </Text>
+              <Button title="View all" color="muted" onPress={() => {}} />
+            </CardFooter>
+          </Card>
+        </View>
+
+        {/* temporal pattern */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Alarm count by site and day. Intensity scales to the worst cell — press one to see what drove that day.">
+              Alarm pattern · last 14 days
+            </CardHeaderTitle>
+          </CardHeader>
+          <View style={{ paddingHorizontal: 20, paddingVertical: 16, gap: 12 }}>
+            <Heatmap
+              rows={SITES.map((s) => ({ key: s.key, label: s.label }))}
+              cols={DAYS.map((d) => ({ key: d, label: d }))}
+              values={ALARM_VALUES}
+              color={solid("red")}
+              selected={hotCell}
+              onSelectCell={setHotCell}
+            />
+            <Text size="sm" color="muted" tabular>
+              {hotCell
+                ? hotValue === 0
+                  ? `${siteOf(hotCell.row as SiteKey).label} · ${hotCell.col} — no alarms`
+                  : `${siteOf(hotCell.row as SiteKey).label} · ${hotCell.col} — ${hotValue} alarms · most frequent: ${WARN_MSGS[hash(DAYS.indexOf(hotCell.col), 8) % WARN_MSGS.length]}`
+                : "Press a cell to see what drove that day"}
+            </Text>
+          </View>
+        </Card>
+      </View>
+
+      {unit !== null && open !== null ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpen(null)}
+          title={unit.key}
+          width={440}
+          onPrev={open.idx > 0 ? () => setOpen({ ...open, idx: open.idx - 1 }) : undefined}
+          onNext={open.idx < walk.length - 1 ? () => setOpen({ ...open, idx: open.idx + 1 }) : undefined}
+          position={`${open.idx + 1}/${walk.length}`}
+        >
+          <View key={unit.key} style={{ flex: 1, padding: 24, gap: 16 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Badge label={stateOf(unit.state).label} color={stateOf(unit.state).color} />
+              <Badge label={siteOf(unit.site).label} />
+            </View>
+            {unit.message ? (
+              <Text size="sm" color="danger">{`${unit.message} · ${formatAge(unit.ageMin ?? 0)} ago`}</Text>
+            ) : null}
+            <View style={{ gap: 6 }}>
+              <KVRow label="Site"><Text size="sm">{siteOf(unit.site).label}</Text></KVRow>
+              <Divider />
+              <KVRow label="Model"><Text size="sm" tabular>{unit.model}</Text></KVRow>
+              <Divider />
+              <KVRow label="Hours since service"><Text size="sm" tabular>{unit.serviceHours.toLocaleString("en-US")}</Text></KVRow>
+            </View>
+            <View style={{ gap: 8, paddingTop: 4 }}>
+              <Text size="sm" weight="semibold">Recent events</Text>
+              <Timeline
+                items={[
+                  ...(unit.message
+                    ? [{ id: "alarm", icon: "circle-alert" as const, iconColor: solid(stateOf(unit.state).color), label: unit.message, right: <Text size="xs" color="muted" tabular>{formatAge(unit.ageMin ?? 0)} ago</Text> }]
+                    : []),
+                  { id: "cycle", icon: "activity" as const, iconColor: solid("blue"), label: `Completed ${120 + hash(unit.serviceHours, 9) % 300} cycles today`, right: <Text size="xs" color="muted" tabular>today</Text> },
+                  { id: "service", icon: "settings" as const, iconColor: colors.zinc[500], label: "Scheduled service completed", right: <Text size="xs" color="muted" tabular>{`${1 + hash(unit.serviceHours, 10) % 20}d ago`}</Text> },
+                ]}
+              />
+            </View>
+          </View>
+          <View
+            style={{
+              borderTopWidth: 1,
+              borderTopColor: colors.border,
+              paddingHorizontal: 20,
+              paddingVertical: 14,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 12,
+            }}
+          >
+            <Button title="Create work order" color="secondary" onPress={() => {}} />
+            <Button title="Open unit record" color="primary" onPress={() => {}} />
+          </View>
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}

package/examples/tpl_wizard.tsx

@@ -0,0 +1,223 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { Button } from "@lotics/ui/button";
+import { Card, CardBody } from "@lotics/ui/card";
+import { Stepper } from "@lotics/ui/stepper";
+import { FormField } from "@lotics/ui/form_field";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { Picker } from "@lotics/ui/picker";
+import type { PickerOption } from "@lotics/ui/picker";
+import { NumberInput } from "@lotics/ui/number_input";
+import { Switch } from "@lotics/ui/switch";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Divider } from "@lotics/ui/divider";
+import { Callout, CalloutText } from "@lotics/ui/callout";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Application wizard — a long form broken into ordered STEPS with a
+// `Stepper` header, one fieldset per step, and a REVIEW step that reads back
+// every value with an Edit jump to its section. Back / Next gate on the current
+// step's required fields; the last step submits. For a form too long to scan as
+// one page (onboarding, applications, KYC). Two-column grid throughout.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const STEPS = ["Company", "Contact", "Terms", "Review"];
+
+const INDUSTRY: PickerOption[] = [
+  { value: "manufacturing", label: "Manufacturing" },
+  { value: "trading", label: "Trading" },
+  { value: "construction", label: "Construction" },
+  { value: "transport", label: "Transportation" },
+  { value: "retail", label: "Retail" },
+];
+
+const SIZE: PickerOption[] = [
+  { value: "1-10", label: "1–10" },
+  { value: "11-50", label: "11–50" },
+  { value: "51-200", label: "51–200" },
+  { value: "200+", label: "200+" },
+];
+
+const TERMS: PickerOption[] = [
+  { value: "receipt", label: "Due on receipt" },
+  { value: "15", label: "Net 15" },
+  { value: "30", label: "Net 30" },
+  { value: "45", label: "Net 45" },
+];
+
+const labelOf = (opts: PickerOption[], v: string) => opts.find((o) => o.value === v)?.label ?? "—";
+
+const half = { flexGrow: 1, flexBasis: 240 } as const;
+const full = { flexGrow: 1, flexBasis: "100%" } as const;
+
+export function TplWizard() {
+  const [step, setStep] = useState(0);
+
+  // Company
+  const [companyName, setCompanyName] = useState("Northwind Packaging Co., Ltd.");
+  const [taxId, setTaxId] = useState("0312456789");
+  const [industry, setIndustry] = useState("manufacturing");
+  const [regCity, setRegCity] = useState("Gothenburg");
+  const [size, setSize] = useState("51-200");
+
+  // Contact
+  const [contactName, setContactName] = useState("Mara Lindqvist");
+  const [role, setRole] = useState("Procurement lead");
+  const [phone, setPhone] = useState("0903 558 214");
+  const [email, setEmail] = useState("mara@northwind.co");
+
+  // Terms
+  const [terms, setTerms] = useState("30");
+  const [creditLimit, setCreditLimit] = useState<number | null>(50000000);
+  const [vatInvoice, setVatInvoice] = useState(true);
+  const [notes, setNotes] = useState("");
+
+  const stepValid = [
+    companyName.trim() !== "" && taxId.trim() !== "",
+    contactName.trim() !== "" && email.trim() !== "",
+    terms !== "",
+    true,
+  ];
+  const isLast = step === STEPS.length - 1;
+
+  const goEdit = (s: number) => setStep(s);
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">New partner application</Text>
+          <Text size="sm" color="muted">Four short steps — we save as you go; review everything before submitting</Text>
+        </View>
+
+        <Card style={{ padding: 0 }}>
+          <CardBody>
+            <Stepper steps={STEPS} current={step} />
+          </CardBody>
+          <Divider />
+
+          {/* step 0 · Company */}
+          {step === 0 ? (
+            <CardBody>
+              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
+                <FormField label="Legal name" style={full}>
+                  <TextInputField value={companyName} onChangeText={setCompanyName} placeholder="Name on the business registration" autoFocus />
+                </FormField>
+                <FormField label="Tax ID" style={half}>
+                  <TextInputField value={taxId} onChangeText={setTaxId} placeholder="10 or 13 digits" inputMode="numeric" />
+                </FormField>
+                <FormField label="Industry" style={half}>
+                  <Picker options={INDUSTRY} value={industry} onValueChange={setIndustry} placeholder="Select industry" accessibilityLabel="Industry" />
+                </FormField>
+                <FormField label="Registered city" style={half}>
+                  <TextInputField value={regCity} onChangeText={setRegCity} placeholder="City" />
+                </FormField>
+                <FormField label="Company size" style={half}>
+                  <Picker options={SIZE} value={size} onValueChange={setSize} placeholder="Headcount" accessibilityLabel="Company size" />
+                </FormField>
+              </View>
+            </CardBody>
+          ) : null}
+
+          {/* step 1 · Contact */}
+          {step === 1 ? (
+            <CardBody>
+              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
+                <FormField label="Contact person" style={half}>
+                  <TextInputField value={contactName} onChangeText={setContactName} placeholder="Full name" autoFocus />
+                </FormField>
+                <FormField label="Role" style={half}>
+                  <TextInputField value={role} onChangeText={setRole} placeholder="Job title" />
+                </FormField>
+                <FormField label="Phone" style={half}>
+                  <TextInputField value={phone} onChangeText={setPhone} placeholder="Mobile number" inputMode="tel" />
+                </FormField>
+                <FormField label="Email" style={half}>
+                  <TextInputField value={email} onChangeText={setEmail} placeholder="name@company.com" inputMode="email" autoCapitalize="none" />
+                </FormField>
+              </View>
+            </CardBody>
+          ) : null}
+
+          {/* step 2 · Terms */}
+          {step === 2 ? (
+            <CardBody>
+              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
+                <FormField label="Payment terms" style={half}>
+                  <Picker options={TERMS} value={terms} onValueChange={setTerms} placeholder="Select terms" accessibilityLabel="Payment terms" />
+                </FormField>
+                <FormField label="Requested credit limit" style={half}>
+                  <NumberInput value={creditLimit} onValueChange={setCreditLimit} min={0} accessibilityLabel="Requested credit limit" />
+                </FormField>
+                <FormField label="VAT invoice" style={full}>
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 40 }}>
+                    <Switch accessibilityLabel="VAT invoice" value={vatInvoice} onChange={setVatInvoice} />
+                    <Text size="sm" color="muted">{vatInvoice ? "Issue an invoice for every order" : "No invoices issued"}</Text>
+                  </View>
+                </FormField>
+                <FormField label="Notes" optional optionalLabel="Optional" style={full}>
+                  <TextInputField value={notes} onChangeText={setNotes} placeholder="Anything the credit team should know" numberOfLines={3} />
+                </FormField>
+              </View>
+            </CardBody>
+          ) : null}
+
+          {/* step 3 · Review */}
+          {step === 3 ? (
+            <CardBody>
+              <Callout tone="info"><CalloutText>Check every detail — once submitted, changes need a credit-team request.</CalloutText></Callout>
+              <ReviewGroup title="Company" onEdit={() => goEdit(0)}>
+                <DetailRow label="Legal name" labelWidth={150}><Text size="sm">{companyName}</Text></DetailRow>
+                <DetailRow label="Tax ID" labelWidth={150}><Text size="sm" tabular>{taxId}</Text></DetailRow>
+                <DetailRow label="Industry" labelWidth={150}><Text size="sm">{labelOf(INDUSTRY, industry)}</Text></DetailRow>
+                <DetailRow label="Registered city" labelWidth={150}><Text size="sm">{regCity}</Text></DetailRow>
+                <DetailRow label="Company size" labelWidth={150}><Text size="sm">{labelOf(SIZE, size)}</Text></DetailRow>
+              </ReviewGroup>
+              <Divider />
+              <ReviewGroup title="Contact" onEdit={() => goEdit(1)}>
+                <DetailRow label="Contact person" labelWidth={150}><Text size="sm">{contactName}</Text></DetailRow>
+                <DetailRow label="Role" labelWidth={150}><Text size="sm">{role}</Text></DetailRow>
+                <DetailRow label="Phone" labelWidth={150}><Text size="sm" tabular>{phone}</Text></DetailRow>
+                <DetailRow label="Email" labelWidth={150}><Text size="sm">{email}</Text></DetailRow>
+              </ReviewGroup>
+              <Divider />
+              <ReviewGroup title="Terms" onEdit={() => goEdit(2)}>
+                <DetailRow label="Payment terms" labelWidth={150}><Text size="sm">{labelOf(TERMS, terms)}</Text></DetailRow>
+                <DetailRow label="Credit limit" labelWidth={150}><Text size="sm" tabular>{creditLimit == null ? "—" : formatMoney(creditLimit)}</Text></DetailRow>
+                <DetailRow label="VAT invoice" labelWidth={150}><Text size="sm">{vatInvoice ? "Yes" : "No"}</Text></DetailRow>
+                <DetailRow label="Notes" labelWidth={150}><Text size="sm" color={notes ? "default" : "muted"}>{notes || "—"}</Text></DetailRow>
+              </ReviewGroup>
+            </CardBody>
+          ) : null}
+
+          <Divider />
+          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, paddingVertical: 16, gap: 8 }}>
+            {step > 0 ? <Button title="Back" color="muted" icon="chevron-left" onPress={() => setStep((s) => s - 1)} /> : null}
+            <View style={{ flex: 1 }} />
+            <Text size="xs" color="muted">{`Step ${step + 1} of ${STEPS.length}`}</Text>
+            {isLast ? (
+              <Button title="Submit application" color="primary" onPress={() => {}} />
+            ) : (
+              <Button title="Next" color="primary" disabled={!stepValid[step]} onPress={() => setStep((s) => s + 1)} />
+            )}
+          </View>
+        </Card>
+      </View>
+    </ScrollView>
+  );
+}
+
+function ReviewGroup({ title, onEdit, children }: { title: string; onEdit: () => void; children: React.ReactNode }) {
+  return (
+    <View style={{ gap: 2 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", paddingBottom: 4 }}>
+        <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>{title}</Text>
+        <Button title="Edit" color="muted" icon="pencil" onPress={onEdit} />
+      </View>
+      {children}
+    </View>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -64,6 +64,7 @@
     "./button": "./src/button.tsx",
     "./checkbox": "./src/checkbox.tsx",
     "./combobox": "./src/combobox.tsx",
+    "./tag_input": "./src/tag_input.tsx",
     "./composer": "./src/composer.tsx",
     "./portal": "./src/portal.tsx",
     "./popover_nav": "./src/popover_nav.tsx",
@@ -82,6 +83,12 @@
     "./card_select_item": "./src/card_select_item.tsx",
     "./badge": "./src/badge.tsx",
     "./callout": "./src/callout.tsx",
+    "./inline_edit": "./src/inline_edit.tsx",
+    "./inline_text_input": "./src/inline_text_input.tsx",
+    "./inline_number_input": "./src/inline_number_input.tsx",
+    "./inline_select": "./src/inline_select.tsx",
+    "./inline_date_picker": "./src/inline_date_picker.tsx",
+    "./inline_time_picker": "./src/inline_time_picker.tsx",
     "./divider": "./src/divider.tsx",
     "./spacer": "./src/spacer.tsx",
     "./index.css": "./src/index.css",
@@ -172,7 +179,9 @@
     "./chip_group": "./src/chip_group.tsx"
   },
   "files": [
-    "src"
+    "src",
+    "examples",
+    "AGENTS.md"
   ],
   "publishConfig": {
     "access": "public"

package/src/bar_chart.tsx

@@ -60,6 +60,11 @@ function useAxisTicks(maxValue: number) {
   }, [maxValue]);
 }
 
+/**
+ * The canonical SVG bar chart over `data: { label, value, color? }[]` — `orientation`
+ * vertical|horizontal, nice auto axis ticks, `formatNumber` for value labels. (No recharts.) For
+ * one inline trend use `Sparkline`; for parts-of-a-whole, `PieChart` / `Breakdown`.
+ */
 export function BarChart(props: BarChartProps) {
   const {
     data,