@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_record_plain.tsx

@@ -1,259 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, type ColorName } from "@lotics/ui/colors";
-import { SectionHeading, SectionHeadingTitle } from "@lotics/ui/section_heading";
-import { Divider } from "@lotics/ui/divider";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { DangerZone } from "@lotics/ui/danger_zone";
-import { InlineStatic } from "@lotics/ui/inline_static";
-import { InlineTextInput } from "@lotics/ui/inline_text_input";
-import { InlineNumberInput } from "@lotics/ui/inline_number_input";
-import { InlineSelect } from "@lotics/ui/inline_select";
-import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
-import { InlineTimePicker } from "@lotics/ui/inline_time_picker";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Inline record (plain) — a full record DRAWER, card-less. It reads
-// top → bottom like a real drawer: a HEADER surfacing the record's identity +
-// status + key facts, then the in-place inline fields, then a DANGER ZONE for
-// the destructive action. Sections are set off by a `SectionHeading` + hairline
-// and generous rhythm, not card chrome — the lighter look for a single
-// full-screen record where banded cards would be visual noise.
-//
-// It's also the reference for the THREE-PART ROW — label · inline editor ·
-// optional `trailing` (an action / badge / unit) — and for read-only alignment:
-// an `InlineStatic` value sits PIXEL-FOR-PIXEL in the same column as the editors
-// (see the "Row anatomy" section).
-// ─────────────────────────────────────────────────────────────────────────────
-
-const PLAN = [
-  { value: "starter", label: "Starter" },
-  { value: "growth", label: "Growth" },
-  { value: "enterprise", label: "Enterprise" },
-];
-
-const HEALTH = [
-  { value: "healthy", label: "Healthy" },
-  { value: "at_risk", label: "At risk" },
-  { value: "churning", label: "Churning" },
-];
-
-const HEALTH_DOT: Record<string, string> = {
-  healthy: colors.emerald[500],
-  at_risk: colors.amber[500],
-  churning: colors.red[500],
-};
-
-// The same health states as a Badge color family (the header's status chip).
-const HEALTH_BADGE: Record<string, ColorName> = {
-  healthy: "emerald",
-  at_risk: "amber",
-  churning: "red",
-};
-
-const STAGE = [
-  { value: "lead", label: "Lead" },
-  { value: "qualified", label: "Qualified" },
-  { value: "proposal", label: "Proposal" },
-  { value: "won", label: "Won" },
-];
-
-function persist<T>(set: (v: T) => void) {
-  return (v: T) =>
-    new Promise<void>((resolve) => {
-      setTimeout(() => {
-        set(v);
-        resolve();
-      }, 350);
-    });
-}
-
-function Field({ label, children, trailing }: { label: string; children: React.ReactNode; trailing?: React.ReactNode }) {
-  return (
-    <DetailRow label={label} labelWidth={130} minHeight={40} trailing={trailing}>
-      <View style={{ flex: 1 }}>{children}</View>
-    </DetailRow>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <View style={{ gap: 8 }}>
-      <SectionHeading>
-        <SectionHeadingTitle>{title}</SectionHeadingTitle>
-      </SectionHeading>
-      <Divider />
-      <View style={{ gap: 2 }}>{children}</View>
-    </View>
-  );
-}
-
-// A compact label-over-value pair for the header's key-facts strip.
-function HeaderStat({ label, value }: { label: string; value: string }) {
-  return (
-    <View style={{ gap: 2 }}>
-      <Text size="xs" color="muted" transform="uppercase">
-        {label}
-      </Text>
-      <Text size="sm" weight="medium" tabular>
-        {value}
-      </Text>
-    </View>
-  );
-}
-
-export function TplRecordPlain() {
-  const [name, setName] = useState("Northwind Traders");
-  const [contact, setContact] = useState("Mara Lindqvist");
-  const [email, setEmail] = useState("mara@northwind.co");
-  const [phone, setPhone] = useState("");
-  const [city, setCity] = useState("Gothenburg");
-  const [value, setValue] = useState<number | null>(48000);
-  const [plan, setPlan] = useState("growth");
-  const [health, setHealth] = useState("healthy");
-  const [renews, setRenews] = useState("2026-05-22");
-  const [review, setReview] = useState("2026-04-10T14:30");
-  const [opens, setOpens] = useState("09:00");
-  // "Row anatomy" fields.
-  const [taxId, setTaxId] = useState("SE556677-8899");
-  const [stage, setStage] = useState("proposal");
-  const [seats, setSeats] = useState<number | null>(25);
-
-  const money = (v: number | null) => (v == null ? "" : `$${v.toLocaleString("en-US")}`);
-  const planLabel = PLAN.find((p) => p.value === plan)?.label ?? "—";
-  const healthLabel = HEALTH.find((h) => h.value === health)?.label ?? "";
-  // Read-only, system-owned values that still align with the editors above.
-  const accountId = "ACC-4821";
-  const lifetimeValue = 128400;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 560, alignSelf: "center", gap: 28 }}>
-        {/* Record header — identity + status + the facts you'd want at a glance,
-            composed in-place (not worth a primitive until a 2nd screen needs it). */}
-        <View style={{ gap: 12 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-            <Text size="xl" weight="semibold">
-              {name}
-            </Text>
-            <Badge label={healthLabel} color={HEALTH_BADGE[health]} />
-            <View style={{ flex: 1 }} />
-            <Text size="xs" color="muted">
-              Click any value to edit
-            </Text>
-          </View>
-          <Text size="sm" color="muted">
-            {contact} · {email}
-          </Text>
-          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 28 }}>
-            <HeaderStat label="Plan" value={planLabel} />
-            <HeaderStat label="Annual value" value={money(value) || "—"} />
-            <HeaderStat label="City" value={city || "—"} />
-          </View>
-        </View>
-
-        <Section title="Contact">
-          <Field label="Account name">
-            <InlineTextInput value={name} onSave={persist(setName)} accessibilityLabel="Account name" />
-          </Field>
-          <Field label="Primary contact">
-            <InlineTextInput value={contact} onSave={persist(setContact)} accessibilityLabel="Primary contact" />
-          </Field>
-          <Field label="Email">
-            <InlineTextInput value={email} onSave={persist(setEmail)} placeholder="Add email…" accessibilityLabel="Email" />
-          </Field>
-          <Field label="Phone">
-            <InlineTextInput value={phone} onSave={persist(setPhone)} placeholder="Add phone…" accessibilityLabel="Phone" />
-          </Field>
-          <Field label="City">
-            <InlineTextInput value={city} onSave={persist(setCity)} accessibilityLabel="City" />
-          </Field>
-        </Section>
-
-        <Section title="Commercial">
-          <Field label="Annual value">
-            <InlineNumberInput value={value} onSave={persist(setValue)} format={money} accessibilityLabel="Annual value" />
-          </Field>
-          <Field label="Plan">
-            <InlineSelect value={plan} onSave={persist(setPlan)} options={PLAN} accessibilityLabel="Plan" />
-          </Field>
-          <Field label="Health">
-            <InlineSelect
-              value={health}
-              onSave={persist(setHealth)}
-              options={HEALTH}
-              accessibilityLabel="Health"
-              renderOptionContent={(o) => (
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                  <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: HEALTH_DOT[o.value] }} />
-                  <Text size="sm">{o.label}</Text>
-                </View>
-              )}
-            />
-          </Field>
-        </Section>
-
-        <Section title="Schedule">
-          <Field label="Renews on">
-            <InlineDatePicker value={renews} onSave={persist(setRenews)} locale="en-US" accessibilityLabel="Renews on" />
-          </Field>
-          <Field label="Next review">
-            <InlineDatePicker value={review} onSave={persist(setReview)} format="datetime" locale="en-US" accessibilityLabel="Next review" />
-          </Field>
-          <Field label="Support opens">
-            <InlineTimePicker value={opens} onSave={persist(setOpens)} accessibilityLabel="Support opens" />
-          </Field>
-        </Section>
-
-        {/* Row anatomy — the three-part row (label · editor · trailing) and
-            read-only alignment, ALL in one 130px-label column so the editors and
-            the InlineStatic values line up to the pixel. Copy these shapes. */}
-        <Section title="Row anatomy">
-          {/* editor + a trailing ACTION */}
-          <Field
-            label="Tax ID"
-            trailing={<Button title="Verify" color="secondary" onPress={() => {}} />}
-          >
-            <InlineTextInput value={taxId} onSave={persist(setTaxId)} placeholder="Add tax ID…" accessibilityLabel="Tax ID" />
-          </Field>
-          {/* editor + a trailing STATUS dot */}
-          <Field
-            label="Pipeline stage"
-            trailing={<Badge variant="dot" color="emerald" label="Active" />}
-          >
-            <InlineSelect value={stage} onSave={persist(setStage)} options={STAGE} accessibilityLabel="Pipeline stage" />
-          </Field>
-          {/* editor + a trailing UNIT label */}
-          <Field
-            label="Licensed seats"
-            trailing={
-              <Text size="sm" color="muted">
-                seats
-              </Text>
-            }
-          >
-            <InlineNumberInput value={seats} onSave={persist(setSeats)} min={0} accessibilityLabel="Licensed seats" />
-          </Field>
-          {/* READ-ONLY value — aligns with the editors above, no input chrome */}
-          <Field label="Account ID">
-            <InlineStatic value={accountId} tabular />
-          </Field>
-          {/* READ-ONLY value + a trailing MARK */}
-          <Field label="Lifetime value" trailing={<Badge label="Computed" color="zinc" />}>
-            <InlineStatic value={money(lifetimeValue)} tabular />
-          </Field>
-        </Section>
-
-        <DangerZone
-          title="Delete account"
-          description="Permanently remove this account and all of its contacts, deals, and history. This can't be undone."
-        >
-          <Button title="Delete account" color="danger" onPress={() => {}} />
-        </DangerZone>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_settings.tsx

@@ -1,178 +0,0 @@
-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, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { Picker } from "@lotics/ui/picker";
-import { Switch } from "@lotics/ui/switch";
-import { Divider } from "@lotics/ui/divider";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Settings — the workspace settings screen; the Action Layout doc
-// made visible. Three banded cards on the zinc-50 canvas:
-//   General     → Divider-separated rows, label left / control right (text+Edit, Pickers)
-//   Notifications → title+description left, live Switch right
-//   Danger zone → separated red heading + description + ONE labeled
-//                    danger button (never icon-only, never next to Save)
-// ─────────────────────────────────────────────────────────────────────────────
-
-const NGON_NGU = [
-  { label: "Vietnamese", value: "vi" },
-  { label: "English", value: "en" },
-];
-
-const MUI_GIO = [
-  { label: "(GMT+7) Ho Chi Minh City", value: "Asia/Ho_Chi_Minh" },
-  { label: "(GMT+7) Bangkok", value: "Asia/Bangkok" },
-  { label: "(GMT+8) Singapore", value: "Asia/Singapore" },
-  { label: "(GMT+9) Tokyo", value: "Asia/Tokyo" },
-];
-
-const THONG_BAO = [
-  {
-    id: "donHang",
-    label: "New orders",
-    description: "Notify immediately when an order is created in this workspace.",
-  },
-  {
-    id: "nhacViec",
-    label: "Due-task reminders",
-    description: "Send an 8:00 AM reminder for tasks due today.",
-  },
-  {
-    id: "tomTat",
-    label: "Weekly digest",
-    description: "A summary of the whole team's activity, sent Monday morning.",
-  },
-] as const;
-
-type ThongBaoId = (typeof THONG_BAO)[number]["id"];
-
-/** One hairline settings row: label (+ optional description) left, control right. */
-function SettingRow({
-  label,
-  description,
-  children,
-}: {
-  label: string;
-  description?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <View
-      style={{
-        paddingHorizontal: 20,
-        paddingVertical: 14,
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 16,
-      }}
-    >
-      <View style={{ flex: 1, gap: 2 }}>
-        <Text size="sm" weight="medium">{label}</Text>
-        {description ? <Text size="xs" color="muted">{description}</Text> : null}
-      </View>
-      {children}
-    </View>
-  );
-}
-
-export function TplSettings() {
-  const [ngonNgu, setNgonNgu] = useState("vi");
-  const [muiGio, setMuiGio] = useState("Asia/Ho_Chi_Minh");
-  const [thongBao, setThongBao] = useState<Record<ThongBaoId, boolean>>({
-    donHang: true,
-    nhacViec: true,
-    tomTat: false,
-  });
-
-  return (
-    <ScrollView
-      style={{ flex: 1, backgroundColor: colors.white }}
-      contentContainerStyle={{ padding: 28 }}
-    >
-      <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
-        {/* header band */}
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Settings</Text>
-          <Text size="sm" color="muted">
-            General settings, notifications and the workspace danger zone
-          </Text>
-        </View>
-
-        {/* General */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle description="Display name, language and timezone applied to every member">
-              General
-            </CardHeaderTitle>
-          </CardHeader>
-          <SettingRow label="Workspace name">
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-              <Text size="sm">Crestline Logistics</Text>
-              <Button title="Edit" color="muted" onPress={() => {}} />
-            </View>
-          </SettingRow>
-          <Divider />
-          <SettingRow label="Language" description="Interface language and outgoing email">
-            <Picker
-              options={NGON_NGU}
-              value={ngonNgu}
-              onValueChange={setNgonNgu}
-              style={{ width: 220 }}
-            />
-          </SettingRow>
-          <Divider />
-          <SettingRow label="Timezone" description="Used for due dates, calendars and reminders">
-            <Picker
-              options={MUI_GIO}
-              value={muiGio}
-              onValueChange={setMuiGio}
-              style={{ width: 220 }}
-            />
-          </SettingRow>
-        </Card>
-
-        {/* Notifications */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle description="Pick what deserves a notification — everything else stays in-app">
-              Notifications
-            </CardHeaderTitle>
-          </CardHeader>
-          {THONG_BAO.map((tb, i) => (
-            <View key={tb.id}>
-              {i > 0 ? <Divider /> : null}
-              <SettingRow label={tb.label} description={tb.description}>
-                <Switch
-                  accessibilityLabel={tb.label}
-                  value={thongBao[tb.id]}
-                  onChange={(value) => setThongBao((prev) => ({ ...prev, [tb.id]: value }))}
-                />
-              </SettingRow>
-            </View>
-          ))}
-        </Card>
-
-        {/* Danger zone — separated, explicit label, confirm before executing */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            {/* bespoke title node: CardHeaderTitle has no danger color, and the
-                red heading is the point of this band */}
-            <View style={{ flex: 1, gap: 2 }}>
-              <Text size="sm" weight="semibold" color="danger">Danger zone</Text>
-              <Text size="xs" color="muted">
-                Permanently deletes the workspace with every table, record and attachment. This
-                cannot be undone.
-              </Text>
-            </View>
-          </CardHeader>
-          <CardFooter>
-            <Button title="Delete workspace" color="danger" onPress={() => {}} />
-          </CardFooter>
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_timeline.tsx

@@ -1,244 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid } from "@lotics/ui/colors";
-import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
-import { Badge } from "@lotics/ui/badge";
-import { Card, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
-import { Icon, type IconName } from "@lotics/ui/icon";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
-import { KPICard } from "@lotics/ui/kpi_card";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Activity log — the audit feed of ONE record (an order).
-// Grammar: zinc-50 canvas · header band · filter pills (ChipGroup) · one Card
-// per DAY, each card = date band → Divider → Timeline. Icon color = event
-// category accent (blue = documents, emerald = payments, zinc = system,
-// red = warnings). Times right-aligned tabular; expandable details on the
-// events that carry numbers. No dead rows: events without inline details
-// carry an ActionMenu (⋯) with the event's real operations — open/download
-// the document, view the workflow run, re-send the reminder.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type Cat = "chungtu" | "thanhtoan" | "hethong";
-
-interface MockEvent {
-  id: string;
-  cat: Cat;
-  icon: IconName;
-  color: string;
-  label: string;
-  time: string; // HH:mm
-  stats?: { label: string; value: string; tone?: "danger" }[];
-  file?: string;
-  note?: string;
-  actions?: ActionMenuItem[];
-}
-
-interface DayGroup {
-  id: string;
-  label: string; // "Today · 12/06"
-  events: MockEvent[];
-}
-
-const DAYS: DayGroup[] = [
-  {
-    id: "d0",
-    label: "Today · 12/06",
-    events: [
-      {
-        id: "e1", cat: "thanhtoan", icon: "circle-check", color: solid("emerald"),
-        label: "Accounting confirmed installment 2 — order settled", time: "14:32",
-        stats: [
-          { label: "Amount", value: formatMoney(12_600_000) },
-          { label: "Method", value: "Bank transfer" },
-          { label: "Outstanding", value: formatMoney(0) },
-        ],
-        note: "Reference TRX-0612-114 · First National Bank",
-      },
-      {
-        id: "e2", cat: "chungtu", icon: "file-up", color: solid("blue"),
-        label: "Nina Adams uploaded the signed delivery note", time: "11:05",
-        file: "DeliveryNote_DN-0042_signed.pdf",
-        actions: [
-          { key: "xem", label: "View document", icon: "eye", onPress: () => {} },
-          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e3", cat: "hethong", icon: "bolt", color: colors.zinc[500],
-        label: "Delivery-reconciliation workflow ran — quantities match the note", time: "11:06",
-        actions: [
-          { key: "chay", label: "View run", icon: "history", onPress: () => {} },
-          { key: "mo", label: "Open workflow", icon: "external-link", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e4", cat: "hethong", icon: "bell", color: colors.zinc[500],
-        label: "Reminded Accounting: order awaiting invoice", time: "11:06",
-        actions: [
-          { key: "xem", label: "View notification", icon: "bell", onPress: () => {} },
-          { key: "nhac", label: "Remind again", icon: "repeat", onPress: () => {} },
-        ],
-      },
-    ],
-  },
-  {
-    id: "d1",
-    label: "Yesterday · 11/06",
-    events: [
-      {
-        id: "e5", cat: "chungtu", icon: "file-text", color: solid("blue"),
-        label: "VAT invoice issued from the Sales invoice template", time: "16:40",
-        file: "Invoice_INV-2026-0584.pdf",
-        actions: [
-          { key: "xem", label: "View invoice", icon: "eye", onPress: () => {} },
-          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
-          { key: "gui", label: "Send to customer", icon: "send", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e6", cat: "thanhtoan", icon: "credit-card", color: solid("emerald"),
-        label: "Installment 1 recorded (50% per contract)", time: "10:18",
-        stats: [
-          { label: "Amount", value: formatMoney(12_600_000) },
-          { label: "Outstanding", value: formatMoney(12_600_000), tone: "danger" },
-        ],
-      },
-      {
-        id: "e7", cat: "hethong", icon: "circle-alert", color: solid("red"),
-        label: "Warning: delivered 2 days past the needed-by date", time: "08:00",
-        note: "Needed by 09/06 — truck actually delivered 11/06. Logged against the delivery KPI.",
-      },
-    ],
-  },
-  {
-    id: "d2",
-    label: "Tuesday · 09/06",
-    events: [
-      {
-        id: "e8", cat: "hethong", icon: "pencil", color: colors.zinc[500],
-        label: "Mark Vu edited the Expected delivery date field", time: "15:22",
-        stats: [
-          { label: "Before", value: "09/06" },
-          { label: "After", value: "11/06" },
-        ],
-        note: "Reason: gluing line jammed at the plant — customer notified by chat.",
-      },
-      {
-        id: "e9", cat: "chungtu", icon: "send", color: solid("blue"),
-        label: "Approved quote emailed to the customer", time: "09:47",
-        file: "Quote_QT-2026-0042.pdf",
-        actions: [
-          { key: "xem", label: "View quote", icon: "eye", onPress: () => {} },
-          { key: "tai", label: "Download", icon: "download", onPress: () => {} },
-          { key: "gui", label: "Re-send email", icon: "send", onPress: () => {} },
-        ],
-      },
-      {
-        id: "e10", cat: "hethong", icon: "circle-check", color: solid("emerald"),
-        label: "Director approved the order — moved to Production order", time: "09:30",
-        actions: [
-          { key: "duyet", label: "View approval", icon: "eye", onPress: () => {} },
-          { key: "lien-ket", label: "Copy link", icon: "copy", onPress: () => {} },
-        ],
-      },
-    ],
-  },
-];
-
-const FILTERS = [
-  { value: "all", label: "All" },
-  { value: "chungtu", label: "Documents" },
-  { value: "thanhtoan", label: "Payments" },
-  { value: "hethong", label: "System" },
-] as const;
-
-function EventDetails({ ev }: { ev: MockEvent }) {
-  return (
-    <View style={{ gap: 8, paddingVertical: 4 }}>
-      {ev.stats ? (
-        <View style={{ flexDirection: "row", gap: 28 }}>
-          {ev.stats.map((s) => (
-            <KPICard key={s.label} label={s.label} value={s.value} format="none" size="sm" tone={s.tone} />
-          ))}
-        </View>
-      ) : null}
-      {ev.note ? <Text size="xs" color="muted">{ev.note}</Text> : null}
-    </View>
-  );
-}
-
-function toTimelineItem(ev: MockEvent): TimelineItem {
-  const hasDetails = !!ev.stats || !!ev.note;
-  return {
-    id: ev.id,
-    icon: ev.icon,
-    iconColor: ev.color,
-    label: ev.label,
-    right: (
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-        {ev.file ? (
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
-            <Icon name="file" size={12} color={colors.zinc[400]} />
-            <Text size="xs" color="muted" numberOfLines={1}>{ev.file}</Text>
-          </View>
-        ) : null}
-        <Text size="xs" color="muted" tabular>{ev.time}</Text>
-        {ev.actions ? (
-          <ActionMenu items={ev.actions} accessibilityLabel={`Actions: ${ev.label}`} />
-        ) : null}
-      </View>
-    ),
-    details: hasDetails ? <EventDetails ev={ev} /> : undefined,
-  };
-}
-
-export function TplTimeline() {
-  const [filter, setFilter] = useState<string>("all");
-
-  const all = DAYS.flatMap((d) => d.events);
-  const countOf = (v: string) => (v === "all" ? all.length : all.filter((e) => e.cat === v).length);
-  const days = DAYS
-    .map((d) => ({ ...d, events: filter === "all" ? d.events : d.events.filter((e) => e.cat === filter) }))
-    .filter((d) => d.events.length > 0);
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
-        {/* header band */}
-        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
-          <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Activity log</Text>
-            <Text size="sm" color="muted">Order SO-2026-0042 · NEWTECONS — who did what, when, with the paper trail</Text>
-          </View>
-          <Badge label="Settled" color="emerald" />
-        </View>
-
-        {/* filter band — pills narrow the feed by event type */}
-        <ChipGroup
-          accessibilityLabel="Filter activity"
-          options={FILTERS.map((f) => ({ label: `${f.label} · ${countOf(f.value)}`, value: f.value }))}
-          value={filter}
-          onValueChange={setFilter}
-        />
-
-        {/* one card per day: date band → hairline → timeline */}
-        {days.map((d) => (
-          <Card key={d.id} style={{ padding: 0 }}>
-            <CardHeader>
-              <CardHeaderTitle>{d.label}</CardHeaderTitle>
-              <CardHeaderMeta>{`${d.events.length} events`}</CardHeaderMeta>
-            </CardHeader>
-            {/* Last Timeline row carries its own 14px tail — trim the band's bottom to keep 16px optical. */}
-            <View style={{ paddingTop: 16, paddingHorizontal: 16, paddingBottom: 2 }}>
-              <Timeline items={d.events.map(toTimelineItem)} />
-            </View>
-          </Card>
-        ))}
-      </View>
-    </ScrollView>
-  );
-}