@lotics/ui 8.0.0 → 10.0.0

package/examples/tpl_quick.tsx

@@ -1,211 +0,0 @@
-import { useRef, useState } from "react";
-import { ScrollView, View, type TextInput as RNTextInput } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
-import { Alert } from "@lotics/ui/alert";
-import { Card, CardBody, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
-import { Divider } from "@lotics/ui/divider";
-import { Icon, type IconName } from "@lotics/ui/icon";
-import { FormField } from "@lotics/ui/form_field";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
-import type { PickerOption } from "@lotics/ui/picker";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { Counter } from "@lotics/ui/counter";
-import { EmptyState } from "@lotics/ui/empty_state";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Quick capture — the SPEED surface, opposite of the heavy form: one
-// compact row of inputs, Enter to add, the field keeps focus and the contact
-// carries over so the next touchpoint is two keystrokes away. Every entry drops
-// into the log below (newest first, undoable). A `SegmentedControl` mode, a
-// `Combobox`-as-select, a `Counter` for the bounded duration. No screen-wide
-// Save — each entry commits on its own.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type ActType = "call" | "email" | "meeting" | "note";
-
-const ACT: Record<ActType, { label: string; icon: IconName }> = {
-  call: { label: "Call", icon: "phone" },
-  email: { label: "Email", icon: "mail" },
-  meeting: { label: "Meeting", icon: "calendar" },
-  note: { label: "Note", icon: "message-square" },
-};
-
-const TYPE_OPTIONS = (Object.keys(ACT) as ActType[]).map((v) => ({ label: ACT[v].label, value: v }));
-
-interface Contact {
-  id: string;
-  name: string;
-  company: string;
-}
-
-const CONTACTS: Contact[] = [
-  { id: "c1", name: "Mara Lindqvist", company: "Northwind Traders" },
-  { id: "c2", name: "Diego Alvarez", company: "Harbor Freight Lines" },
-  { id: "c3", name: "Priya Nair", company: "Summit Packaging Co." },
-  { id: "c4", name: "Tom Becker", company: "Atlas Distribution" },
-  { id: "c5", name: "Lena Fischer", company: "Bluewater Logistics" },
-  { id: "c6", name: "Sara Cohen", company: "Meridian Retail Group" },
-];
-
-const CONTACT_OPTIONS: PickerOption<string, Contact>[] = CONTACTS.map((c) => ({
-  value: c.id,
-  label: c.name,
-  data: c,
-}));
-
-interface Entry {
-  id: string;
-  type: ActType;
-  contact: Contact;
-  note: string;
-  minutes: number;
-  time: string;
-}
-
-const SEED: Entry[] = [
-  { id: "e1", type: "call", contact: CONTACTS[2], note: "Reviewed Q3 volume, wants a revised quote by Friday", minutes: 15, time: "10:05" },
-  { id: "e2", type: "email", contact: CONTACTS[0], note: "Sent updated pallet spec sheet", minutes: 0, time: "09:40" },
-  { id: "e3", type: "meeting", contact: CONTACTS[4], note: "Warehouse walkthrough — flagged dock height", minutes: 45, time: "09:12" },
-];
-
-const fmtDuration = (m: number) => (m === 0 ? "—" : m >= 60 ? `${Math.floor(m / 60)}h${m % 60 ? ` ${m % 60}m` : ""}` : `${m}m`);
-
-export function TplQuick() {
-  const id = useRef(1);
-  const noteRef = useRef<RNTextInput>(null);
-
-  const [type, setType] = useState<ActType>("call");
-  const [contact, setContact] = useState<PickerOption<string, Contact> | null>(null);
-  const [note, setNote] = useState("");
-  const [minutes, setMinutes] = useState(15);
-  const [entries, setEntries] = useState<Entry[]>(SEED);
-
-  const canAdd = contact !== null && note.trim().length > 0;
-
-  const add = () => {
-    if (!canAdd || !contact?.data) return;
-    const entry: Entry = {
-      id: `e_${(id.current += 1)}`,
-      type,
-      contact: contact.data,
-      note: note.trim(),
-      minutes,
-      time: "Just now",
-    };
-    setEntries((prev) => [entry, ...prev]);
-    // Keep type + contact for the next touchpoint; clear only the note + duration
-    // and re-focus the note so logging again is immediate.
-    setNote("");
-    setMinutes(type === "email" ? 0 : 15);
-    noteRef.current?.focus();
-  };
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Log activity</Text>
-          <Text size="sm" color="muted">Capture a touchpoint in seconds — pick the type, the contact, type the note, press Enter</Text>
-        </View>
-
-        {/* the capture row */}
-        <Card style={{ padding: 0 }}>
-          <CardBody>
-            <SegmentedControl accessibilityLabel="Activity type" options={TYPE_OPTIONS} value={type} onValueChange={setType} style={{ marginBottom: 16 }} />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Contact" style={{ flexGrow: 1, flexBasis: 240 }}>
-                <Combobox
-                  options={CONTACT_OPTIONS}
-                  value={contact}
-                  onValueChange={setContact}
-                  getOptionDescription={(o) => o.data?.company}
-                >
-                  <ComboboxInput placeholder="Select a contact" accessibilityLabel="Contact" />
-                  <ComboboxContent />
-                </Combobox>
-              </FormField>
-              <FormField label="Duration" style={{ flexGrow: 0, flexBasis: 180 }}>
-                <View style={{ minHeight: 40, justifyContent: "center" }}>
-                  <Counter value={minutes} onValueChange={setMinutes} min={0} max={240} step={15} accessibilityLabel="Duration" format={fmtDuration} />
-                </View>
-              </FormField>
-            </View>
-            <FormField label="Note">
-              <TextInputField
-                ref={noteRef}
-                value={note}
-                onChangeText={setNote}
-                placeholder="What happened? (press Enter to log)"
-                autoFocus
-                onKeyPress={(e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-                  if (e.nativeEvent.key === "Enter") {
-                    e.preventDefault();
-                    add();
-                  }
-                }}
-              />
-            </FormField>
-          </CardBody>
-          <Divider />
-          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, paddingVertical: 12, gap: 8 }}>
-            <Text size="xs" color="muted" style={{ flex: 1 }}>
-              {contact?.data ? `${ACT[type].label} · ${contact.data.name}` : "Pick a contact to log against"}
-            </Text>
-            <Button title="Log activity" color="primary" icon="plus" disabled={!canAdd} onPress={add} />
-          </View>
-        </Card>
-
-        {/* the running log */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle>Today</CardHeaderTitle>
-            <CardHeaderMeta>{entries.length} logged</CardHeaderMeta>
-          </CardHeader>
-          {entries.length === 0 ? (
-            <EmptyState icon="message-square" message="Nothing logged yet" hint="Your activity for the day appears here" />
-          ) : (
-            entries.map((e, i) => (
-              <View key={e.id}>
-                {i > 0 ? <Divider /> : null}
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12 }}>
-                  <View style={{ width: 32, height: 32, borderRadius: 16, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
-                    <Icon name={ACT[e.type].icon} size={16} color={colors.zinc[600]} />
-                  </View>
-                  <View style={{ flex: 1, gap: 1 }}>
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-                      <Text weight="medium" numberOfLines={1}>{e.contact.name}</Text>
-                      <Text size="xs" color="muted">· {e.contact.company}</Text>
-                    </View>
-                    <Text size="sm" color="muted" numberOfLines={1}>{e.note}</Text>
-                  </View>
-                  <View style={{ alignItems: "flex-end", width: 76 }}>
-                    <Text size="xs" color="muted" tabular>{e.time}</Text>
-                    {e.minutes > 0 ? <Text size="xs" color="muted" tabular>{fmtDuration(e.minutes)}</Text> : null}
-                  </View>
-                  <Button
-                    title="Delete"
-                    color="secondary"
-                    accessibilityLabel={`Delete ${e.contact.name} ${ACT[e.type].label.toLowerCase()}`}
-                    onPress={() =>
-                      Alert.alert(
-                        "Delete activity?",
-                        `Remove the ${ACT[e.type].label.toLowerCase()} logged for ${e.contact.name}. This can't be undone.`,
-                        [
-                          { text: "Cancel", style: "cancel" },
-                          { text: "Delete", style: "destructive", onPress: () => setEntries((prev) => prev.filter((x) => x.id !== e.id)) },
-                        ],
-                      )
-                    }
-                  />
-                </View>
-              </View>
-            ))
-          )}
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}

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>
-  );
-}