@godxjp/ui 19.2.0 → 19.4.0

package/docs/showcase/case6-agency-handy.tsx

@@ -43,7 +43,7 @@ import {
 } from "lucide-react";
 
 import { Button, Heading, Text } from "@godxjp/ui/general";
-import { Flex } from "@godxjp/ui/layout";
+import { Flex, MobileShell, ResponsiveGrid } from "@godxjp/ui/layout";
 import {
   Badge,
   type BadgeProps,
@@ -52,14 +52,7 @@ import {
   Descriptions,
   EmptyState,
 } from "@godxjp/ui/data-display";
-import {
-  Checkbox,
-  Input,
-  RadioGroupRoot,
-  RadioItem,
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@godxjp/ui/data-entry";
+import { Checkbox, Input, RadioGroup, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
 import {
   AlertDialog,
   Alert,
@@ -249,32 +242,36 @@ function ItemListCard({
           : "hover:border-primary")
       }
     >
-      <CardContent solo className="flex items-start gap-3">
-        {selectMode ? (
-          <Checkbox
-            checked={selected}
-            onCheckedChange={onToggle}
-            aria-label={`選択 ${item.name}`}
-            className="mt-0.5 size-5"
-          />
-        ) : null}
-        <div className="min-w-0 flex-1">
-          <Text as="div" size="sm" weight="bold" truncate>
-            {item.name}
-          </Text>
-          <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5">
-            <MonoCode>{item.rc}</MonoCode>
-            <MonoCode>JAN {item.jan}</MonoCode>
-          </div>
-          <Flex align="center" justify="between" gap="sm" className="mt-1.5">
-            <Badge tone={st.tone} variant="outline" className="rounded-full">
-              {st.label}
-            </Badge>
-            <Text size="xs" tone="muted" tabular className="shrink-0">
-              ×{item.qty} · {item.receivedAt}
-            </Text>
+      <CardContent solo>
+        <Flex align="start" gap="md">
+          <Flex direction="col" gap="xs">
+            {selectMode ? (
+              <Checkbox
+                checked={selected}
+                onCheckedChange={onToggle}
+                aria-label={`選択 ${item.name}`}
+                className="size-5"
+              />
+            ) : null}
+            <Flex direction="col" gap="sm" className="min-w-0 flex-1">
+              <Text as="div" size="sm" weight="bold" truncate>
+                {item.name}
+              </Text>
+              <Flex wrap align="center" gap="sm">
+                <MonoCode>{item.rc}</MonoCode>
+                <MonoCode>JAN {item.jan}</MonoCode>
+              </Flex>
+              <Flex align="center" justify="between" gap="sm">
+                <Badge tone={st.tone} variant="outline" className="rounded-full">
+                  {st.label}
+                </Badge>
+                <Text size="xs" tone="muted" tabular className="shrink-0">
+                  ×{item.qty} · {item.receivedAt}
+                </Text>
+              </Flex>
+            </Flex>
           </Flex>
-        </div>
+        </Flex>
       </CardContent>
     </Card>
   );
@@ -293,22 +290,24 @@ function PackingListCard({ packing, onTap }: { packing: Packing; onTap?: () => v
       }
     >
       <CardContent solo>
-        <Flex align="center" justify="between" gap="sm">
-          <Text as="code" size="sm" weight="bold" tabular>
-            {packing.code}
-          </Text>
-          <Badge tone={st.tone} variant="outline" className="rounded-full">
-            {st.label}
-          </Badge>
-        </Flex>
-        <Flex align="center" justify="between" gap="sm" className="mt-1">
-          <Text size="xs" tone="muted" truncate>
-            {packing.customer} · {packing.city}
-          </Text>
-          <Text size="xs" tone="muted" tabular className="shrink-0">
-            ×{packing.items}
-            {packing.slot ? ` · ${packing.slot}` : ""}
-          </Text>
+        <Flex direction="col" gap="xs">
+          <Flex align="center" justify="between" gap="sm">
+            <Text as="code" size="sm" weight="bold" tabular>
+              {packing.code}
+            </Text>
+            <Badge tone={st.tone} variant="outline" className="rounded-full">
+              {st.label}
+            </Badge>
+          </Flex>
+          <Flex align="center" justify="between" gap="sm">
+            <Text size="xs" tone="muted" truncate>
+              {packing.customer} · {packing.city}
+            </Text>
+            <Text size="xs" tone="muted" tabular className="shrink-0">
+              ×{packing.items}
+              {packing.slot ? ` · ${packing.slot}` : ""}
+            </Text>
+          </Flex>
         </Flex>
       </CardContent>
     </Card>
@@ -318,7 +317,7 @@ function PackingListCard({ packing, onTap }: { packing: Packing; onTap?: () => v
 /** Three uppercase muted section header + right-aligned mono count. */
 function SectionHeader({ children, count }: { children: React.ReactNode; count?: number }) {
   return (
-    <Flex align="center" justify="between" className="px-0.5">
+    <Flex align="center" justify="between">
       <Text size="2xs" weight="medium" tone="muted" className="tracking-wider uppercase">
         {children}
       </Text>
@@ -333,35 +332,32 @@ function SectionHeader({ children, count }: { children: React.ReactNode; count?:
 
 // ── Phone shell ──────────────────────────────────────────────────────────────
 
-function PhoneFrame({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="mx-auto w-96 max-w-full shrink-0">
-      <Flex
-        direction="col"
-        className="bg-background max-h-[calc(100vh-2rem)] min-h-[844px] overflow-hidden rounded-2xl border"
-      >
-        {children}
-      </Flex>
-    </div>
-  );
-}
+/**
+ * gh#354 §6 — this file used to BUILD the shell: a `Card` + `CardContent flush` phone frame, a
+ * `ui-card-inset-x h-9` status row, an `h-14 border-b` header, a `flex-1 overflow-y-auto` body, a
+ * `shrink-0 border-t` action strip and a `ResponsiveGrid` tab bar. It reproduced the look and
+ * neither behaviour that matters on a device — the document still scrolled, and nothing padded out
+ * of `env(safe-area-inset-*)`. All five bands are now `MobileShell` slots.
+ */
 
 function StatusBar() {
   return (
-    <div className="flex h-9 shrink-0 items-center justify-between px-5">
+    <>
       <Text size="sm" weight="medium" tabular>
         9:41
       </Text>
       <Text size="sm" weight="medium" tabular tone="muted">
         Acme Handy
       </Text>
-    </div>
+    </>
   );
 }
 
 function TabBar({ active, onChange }: { active: string; onChange: (id: string) => void }) {
+  // The tab bar's own tiling — equal width, no seam, no gutter — is the `tabBar` slot's contract,
+  // so there is no grid and no column count here any more.
   return (
-    <nav className="grid shrink-0 grid-cols-3 border-t" aria-label="ワークフロー">
+    <>
       {TABS.map((t) => {
         const isActive = t.id === active;
         const Icon = t.icon;
@@ -372,7 +368,7 @@ function TabBar({ active, onChange }: { active: string; onChange: (id: string) =
             onClick={() => onChange(t.id)}
             aria-current={isActive ? "page" : undefined}
             className={
-              "h-16 flex-col gap-1 rounded-none font-medium text-[var(--font-size-2xs)] " +
+              "h-full flex-col rounded-none font-medium text-[var(--font-size-2xs)] " +
               (isActive ? "text-primary" : "text-muted-foreground")
             }
           >
@@ -381,7 +377,7 @@ function TabBar({ active, onChange }: { active: string; onChange: (id: string) =
           </Button>
         );
       })}
-    </nav>
+    </>
   );
 }
 
@@ -401,48 +397,48 @@ function ItemLookupSheet({
         <SheetHeader>
           <SheetTitle>Quét hoặc nhập mã</SheetTitle>
         </SheetHeader>
-        <SheetBody className="flex flex-col gap-4">
-          {/* Viewfinder placeholder — a Card surface, not a hand-rolled illustration */}
-          <Flex
-            align="center"
-            justify="center"
-            className="border-border bg-secondary/40 h-40 rounded-xl border-2 border-dashed"
-          >
-            <Flex direction="col" align="center" gap="sm">
-              <ScanLine
-                className="size-7 text-[color:var(--attention,var(--warning))]"
-                aria-hidden="true"
-                strokeWidth={1.5}
-              />
-              <Text size="sm" tone="muted">
-                Đưa mã vạch vào khung
+        <SheetBody>
+          <Flex direction="col" gap="md">
+            {/* Viewfinder placeholder — a Card surface, not a hand-rolled illustration */}
+            <Card variant="muted" className="border-2 border-dashed">
+              <CardContent solo>
+                <Flex direction="col" align="center" gap="sm" className="h-40 justify-center">
+                  <ScanLine
+                    className="size-7 text-[color:var(--attention,var(--warning))]"
+                    aria-hidden="true"
+                    strokeWidth={1.5}
+                  />
+                  <Text size="sm" tone="muted">
+                    Đưa mã vạch vào khung
+                  </Text>
+                </Flex>
+              </CardContent>
+            </Card>
+            <Flex direction="col" gap="sm">
+              <Text size="sm" weight="medium">
+                Hoặc nhập mã thủ công
               </Text>
-            </Flex>
-          </Flex>
-          <Flex direction="col" gap="sm">
-            <Text size="sm" weight="medium">
-              Hoặc nhập mã thủ công
-            </Text>
-            <Flex gap="sm">
-              <Input
-                value={code}
-                onChange={(e) => setCode(e.target.value)}
-                placeholder="RC- / PKG- / JAN"
-                className="font-mono"
-                inputMode="text"
-                autoComplete="off"
-              />
-              <Button
-                onClick={() => {
-                  onOpenChange(false);
-                  setCode("");
-                  toast.success("Đã tìm thấy RC-204881 · Sữa rửa mặt Hada Labo");
-                }}
-                disabled={code.trim() === ""}
-              >
-                <Search aria-hidden="true" />
-                Tìm
-              </Button>
+              <Flex gap="sm">
+                <Input
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder="RC- / PKG- / JAN"
+                  className="font-mono"
+                  inputMode="text"
+                  autoComplete="off"
+                />
+                <Button
+                  onClick={() => {
+                    onOpenChange(false);
+                    setCode("");
+                    toast.success("Đã tìm thấy RC-204881 · Sữa rửa mặt Hada Labo");
+                  }}
+                  disabled={code.trim() === ""}
+                >
+                  <Search aria-hidden="true" />
+                  Tìm
+                </Button>
+              </Flex>
             </Flex>
           </Flex>
         </SheetBody>
@@ -471,29 +467,31 @@ function PackagePickerSheet({
         <SheetHeader>
           <SheetTitle>Gán vào kiện</SheetTitle>
         </SheetHeader>
-        <SheetBody className="flex flex-col gap-2">
-          <SectionHeader count={PACKINGS.length}>Kiện đang mở</SectionHeader>
-          {PACKINGS.map((p) => (
-            <PackingListCard
-              key={p.id}
-              packing={p}
-              onTap={() => {
+        <SheetBody>
+          <Flex direction="col" gap="sm">
+            <SectionHeader count={PACKINGS.length}>Kiện đang mở</SectionHeader>
+            {PACKINGS.map((p) => (
+              <PackingListCard
+                key={p.id}
+                packing={p}
+                onTap={() => {
+                  onOpenChange(false);
+                  toast.success(`Đã gán ${count} item vào ${p.code}`);
+                }}
+              />
+            ))}
+            <Button
+              variant="outline"
+              onClick={() => {
                 onOpenChange(false);
-                toast.success(`Đã gán ${count} item vào ${p.code}`);
+                toast.success(`Đã tạo kiện mới với ${count} item`);
               }}
-            />
-          ))}
-          <Button
-            variant="outline"
-            onClick={() => {
-              onOpenChange(false);
-              toast.success(`Đã tạo kiện mới với ${count} item`);
-            }}
-            className="text-primary hover:border-primary h-11 w-full border-2 border-dashed"
-          >
-            <PackagePlus aria-hidden="true" strokeWidth={1.5} />
-            Tạo kiện mới với {count} item này
-          </Button>
+              className="text-primary hover:border-primary h-11 w-full border-2 border-dashed"
+            >
+              <PackagePlus aria-hidden="true" strokeWidth={1.5} />
+              Tạo kiện mới với {count} item này
+            </Button>
+          </Flex>
         </SheetBody>
         <SheetFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
@@ -527,66 +525,51 @@ function ItemFormSheet({
         <SheetHeader>
           <SheetTitle>Thêm hàng mới</SheetTitle>
         </SheetHeader>
-        <SheetBody className="flex flex-col gap-4">
-          <Flex direction="col" gap="xs">
-            <Text size="sm" weight="medium">
-              Mã vạch
-            </Text>
-            <Input defaultValue="JAN 4987241135219" readOnly className="font-mono" />
-          </Flex>
-          <Flex direction="col" gap="xs">
-            <Text size="sm" weight="medium">
-              Tên hàng (tùy chọn)
-            </Text>
-            <Input placeholder="Nhập tên hàng" autoComplete="off" />
-          </Flex>
-          <Flex direction="col" gap="xs">
-            <Text size="sm" weight="medium">
-              Số lượng
-            </Text>
-            <Input
-              type="number"
-              value={qty}
-              min={1}
-              onChange={(e) => setQty(e.target.value)}
-              className="w-24 tabular-nums"
-            />
-          </Flex>
-          <Flex direction="col" gap="sm">
-            <Text size="sm" weight="medium">
-              Đích đến
-            </Text>
-            <RadioGroupRoot value={dest} onValueChange={setDest} className="flex flex-col gap-2">
-              {DESTINATIONS.map((d) => {
-                const checked = dest === d.id;
-                const rowId = `handy-dest-${d.id}`;
-                return (
-                  <label
-                    key={d.id}
-                    htmlFor={rowId}
-                    className={
-                      "flex cursor-pointer items-center gap-3 rounded-xl border p-3 transition-colors " +
-                      (checked
-                        ? "border-primary bg-[color-mix(in_oklch,var(--primary)_8%,transparent)]"
-                        : "hover:border-primary")
-                    }
-                  >
-                    <RadioItem id={rowId} value={d.id} className="mt-0.5" />
-                    <span className="min-w-0">
-                      <Text as="span" size="sm" weight="medium" className="block">
-                        {d.label}
-                      </Text>
-                      <Text as="span" size="xs" tone="muted" className="block">
-                        {d.hint}
-                      </Text>
-                    </span>
-                  </label>
-                );
-              })}
-            </RadioGroupRoot>
+        <SheetBody>
+          <Flex direction="col" gap="md">
+            <Flex direction="col" gap="xs">
+              <Text size="sm" weight="medium">
+                Mã vạch
+              </Text>
+              <Input defaultValue="JAN 4987241135219" readOnly className="font-mono" />
+            </Flex>
+            <Flex direction="col" gap="xs">
+              <Text size="sm" weight="medium">
+                Tên hàng (tùy chọn)
+              </Text>
+              <Input placeholder="Nhập tên hàng" autoComplete="off" />
+            </Flex>
+            <Flex direction="col" gap="xs">
+              <Text size="sm" weight="medium">
+                Số lượng
+              </Text>
+              <Input
+                type="number"
+                value={qty}
+                min={1}
+                onChange={(e) => setQty(e.target.value)}
+                className="w-24 tabular-nums"
+              />
+            </Flex>
+            <Flex direction="col" gap="sm">
+              <Text size="sm" weight="medium">
+                Đích đến
+              </Text>
+              <RadioGroup
+                id="handy-dest"
+                value={dest}
+                onValueChange={setDest}
+                orientation="vertical"
+                options={DESTINATIONS.map((d) => ({
+                  value: d.id,
+                  label: d.label,
+                  description: d.hint,
+                }))}
+              />
+            </Flex>
           </Flex>
         </SheetBody>
-        <SheetFooter className="flex-row gap-2">
+        <SheetFooter className="flex-row">
           <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
             Huỷ
           </Button>
@@ -609,26 +592,24 @@ function ItemFormSheet({
 
 type ListState = "ready" | "loading" | "empty" | "error";
 
+/**
+ * The SCROLL REGION of the inbound screen — and nothing else. The sticky bar and the tab bar are
+ * `MobileShell` bands now, so this component no longer owns a scroll box, a `flex-1`, or a border.
+ */
 function InboundTab({
   state,
   onRetry,
   selectMode,
-  setSelectMode,
   selected,
   setSelected,
   onScan,
-  onAdd,
-  onAssign,
 }: {
   state: ListState;
   onRetry: () => void;
   selectMode: boolean;
-  setSelectMode: (v: boolean) => void;
   selected: Set<string>;
   setSelected: React.Dispatch<React.SetStateAction<Set<string>>>;
   onScan: () => void;
-  onAdd: () => void;
-  onAssign: () => void;
 }) {
   const [filter, setFilter] = React.useState<string>("all");
 
@@ -641,22 +622,22 @@ function InboundTab({
   );
 
   return (
-    <>
-      <div className="flex flex-1 flex-col gap-3 overflow-y-auto p-4">
-        {/* Filter chips — horizontal scroll, count pills */}
-        <ToggleGroup
-          type="single"
-          value={filter}
-          onValueChange={(v) => {
-            if (v) setFilter(v);
-          }}
-          className="flex w-full justify-start gap-2 overflow-x-auto"
-        >
+    <Flex direction="col" gap="md">
+      {/* Filter chips — horizontal scroll, count pills */}
+      <ToggleGroup
+        type="single"
+        value={filter}
+        onValueChange={(v) => {
+          if (v) setFilter(v);
+        }}
+        className="w-full overflow-x-auto"
+      >
+        <Flex justify="start" gap="sm">
           {FILTERS.map((f) => (
             <ToggleGroupItem
               key={f.id}
               value={f.id}
-              className="h-9 shrink-0 gap-1.5 rounded-full px-3 whitespace-nowrap text-[var(--font-size-xs)]"
+              className="h-9 shrink-0 rounded-full whitespace-nowrap text-[var(--font-size-xs)]"
             >
               {f.label}
               <Text size="xs" mono tabular className="opacity-70">
@@ -664,125 +645,146 @@ function InboundTab({
               </Text>
             </ToggleGroupItem>
           ))}
-        </ToggleGroup>
+        </Flex>
+      </ToggleGroup>
 
-        {state === "loading" ? (
-          <Flex direction="col" gap="md" aria-busy="true">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <Card key={i} density="tight" className="rounded-xl">
-                <CardContent solo>
+      {state === "loading" ? (
+        <Flex direction="col" gap="md" aria-busy="true">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Card key={i} density="tight" className="rounded-xl">
+              <CardContent solo>
+                <Flex direction="col" gap="md">
                   <Skeleton className="h-4 w-3/5" />
-                  <Skeleton className="mt-2 h-3 w-2/5" />
-                  <Skeleton className="mt-3 h-5 w-24 rounded-full" />
-                </CardContent>
-              </Card>
-            ))}
-          </Flex>
-        ) : state === "error" ? (
-          <Alert tone="warning">
-            <AlertTitle>Không tải được danh sách</AlertTitle>
-            <AlertDescription className="flex flex-col items-start gap-2">
+                  <Skeleton className="h-3 w-2/5" />
+                  <Skeleton className="h-5 w-24 rounded-full" />
+                </Flex>
+              </CardContent>
+            </Card>
+          ))}
+        </Flex>
+      ) : state === "error" ? (
+        <Alert tone="warning">
+          <AlertTitle>Không tải được danh sách</AlertTitle>
+          <AlertDescription>
+            <Flex direction="col" align="start" gap="sm">
               Kiểm tra kết nối rồi thử lại.
               <Button variant="outline" size="sm" onClick={onRetry}>
                 <RefreshCw aria-hidden="true" />
                 Thử lại
               </Button>
-            </AlertDescription>
-          </Alert>
-        ) : state === "empty" || visible.length === 0 ? (
-          <EmptyState
-            icon={Boxes}
-            title="Chưa có hàng trong mục này"
-            description="Quét mã để nhập hàng mới vào kho."
-            action={
-              <Button size="sm" onClick={onScan}>
-                <ScanLine aria-hidden="true" />
-                Quét / Tìm mã
-              </Button>
-            }
-          />
-        ) : (
-          <Flex direction="col" gap="md">
-            {visible.map((item) => (
-              <ItemListCard
-                key={item.id}
-                item={item}
-                selectMode={selectMode}
-                selected={selected.has(item.id)}
-                onToggle={() =>
-                  setSelected((prev) => {
-                    const next = new Set(prev);
-                    if (next.has(item.id)) next.delete(item.id);
-                    else next.add(item.id);
-                    return next;
-                  })
-                }
-              />
-            ))}
-          </Flex>
-        )}
-      </div>
-
-      {/* Sticky action bar (scan-first) OR select-mode contextual bar */}
-      {selectMode ? (
-        <div className="shrink-0 border-t bg-[color-mix(in_oklch,var(--primary)_5%,var(--background))] p-3">
-          <Flex align="center" justify="between" className="mb-2">
-            <Text size="sm" tabular>
-              <Text as="span" weight="bold">
-                {selected.size}
-              </Text>{" "}
-              item đã chọn
-            </Text>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                setSelectMode(false);
-                setSelected(new Set());
-              }}
-            >
-              Xong
-            </Button>
-          </Flex>
-          <Flex gap="sm">
-            <Button className="flex-[2]" disabled={selected.size === 0} onClick={onAssign}>
-              <Package aria-hidden="true" />
-              Gán vào kiện…
-            </Button>
-            <Button variant="outline" className="flex-1" disabled={selected.size === 0}>
-              Kiện mới
+            </Flex>
+          </AlertDescription>
+        </Alert>
+      ) : state === "empty" || visible.length === 0 ? (
+        <EmptyState
+          icon={Boxes}
+          title="Chưa có hàng trong mục này"
+          description="Quét mã để nhập hàng mới vào kho."
+          action={
+            <Button size="sm" onClick={onScan}>
+              <ScanLine aria-hidden="true" />
+              Quét / Tìm mã
             </Button>
-          </Flex>
-        </div>
+          }
+        />
       ) : (
-        <div className="flex shrink-0 gap-2 border-t p-3">
-          <Button className="flex-[2]" onClick={onScan}>
-            <ScanLine aria-hidden="true" />
-            Quét / Tìm mã
-          </Button>
-          <Button variant="outline" className="flex-1" onClick={onAdd}>
-            <Plus aria-hidden="true" />
-            Thêm hàng
-          </Button>
-        </div>
+        <Flex direction="col" gap="md">
+          {visible.map((item) => (
+            <ItemListCard
+              key={item.id}
+              item={item}
+              selectMode={selectMode}
+              selected={selected.has(item.id)}
+              onToggle={() =>
+                setSelected((prev) => {
+                  const next = new Set(prev);
+                  if (next.has(item.id)) next.delete(item.id);
+                  else next.add(item.id);
+                  return next;
+                })
+              }
+            />
+          ))}
+        </Flex>
       )}
-    </>
+    </Flex>
+  );
+}
+
+/**
+ * The inbound screen's `actions` band: the scan-first pair at rest, the contextual pair in select
+ * mode. It lives OUTSIDE the scroll region, so it needs no `position: sticky` and no bottom padding
+ * on the list to clear it, and `MobileShell` gives it the home-indicator inset when no tab bar
+ * follows.
+ */
+function InboundActions({
+  selectMode,
+  selected,
+  onExitSelect,
+  onScan,
+  onAdd,
+  onAssign,
+}: {
+  selectMode: boolean;
+  selected: Set<string>;
+  onExitSelect: () => void;
+  onScan: () => void;
+  onAdd: () => void;
+  onAssign: () => void;
+}) {
+  if (!selectMode) {
+    return (
+      <>
+        <Button className="flex-[2]" onClick={onScan}>
+          <ScanLine aria-hidden="true" />
+          Quét / Tìm mã
+        </Button>
+        <Button variant="outline" className="flex-1" onClick={onAdd}>
+          <Plus aria-hidden="true" />
+          Thêm hàng
+        </Button>
+      </>
+    );
+  }
+  return (
+    <Flex direction="col" gap="sm" className="w-full">
+      <Flex align="center" justify="between">
+        <Text size="sm" tabular>
+          <Text as="span" weight="bold">
+            {selected.size}
+          </Text>{" "}
+          item đã chọn
+        </Text>
+        <Button variant="ghost" size="sm" onClick={onExitSelect}>
+          Xong
+        </Button>
+      </Flex>
+      <Flex gap="sm">
+        <Button className="flex-[2]" disabled={selected.size === 0} onClick={onAssign}>
+          <Package aria-hidden="true" />
+          Gán vào kiện…
+        </Button>
+        <Button variant="outline" className="flex-1" disabled={selected.size === 0}>
+          Kiện mới
+        </Button>
+      </Flex>
+    </Flex>
   );
 }
 
-function PackingTab({ onScan }: { onScan: () => void }) {
+function PackingTab() {
   const active = PACKINGS.find((p) => p.status === "active");
   const others = PACKINGS.filter((p) => p.status !== "active");
   return (
-    <>
-      <div className="flex flex-1 flex-col gap-3 overflow-y-auto p-4">
-        {active ? (
-          <Card
-            density="tight"
-            accent="primary"
-            className="border-primary rounded-xl bg-[color-mix(in_oklch,var(--primary)_6%,transparent)]"
-          >
-            <CardContent solo>
+    <Flex direction="col" gap="md">
+      {active ? (
+        <Card
+          density="tight"
+          accent="primary"
+          className="border-primary bg-[color-mix(in_oklch,var(--primary)_6%,transparent)]"
+        >
+          <CardContent solo>
+            <Flex direction="col" gap="xs">
               <Flex align="center" justify="between">
                 <Text size="2xs" weight="medium" tone="muted" className="tracking-wider uppercase">
                   Kiện đang làm
@@ -791,51 +793,59 @@ function PackingTab({ onScan }: { onScan: () => void }) {
                   {PACKING_STATUS.active.label}
                 </Badge>
               </Flex>
-              <Text as="div" size="lg" weight="bold" mono tabular className="mt-1">
+              <Text as="div" size="lg" weight="bold" mono tabular>
                 {active.code}
               </Text>
-              <Text size="xs" tone="muted" tabular as="div" className="mt-0.5">
+              <Text size="xs" tone="muted" tabular as="div">
                 {active.customer} · {active.city} · ×{active.items} · {active.slot}
               </Text>
-            </CardContent>
-          </Card>
-        ) : null}
+            </Flex>
+          </CardContent>
+        </Card>
+      ) : null}
 
-        <SectionHeader count={others.length}>Kiện đang mở</SectionHeader>
-        <Flex direction="col" gap="md">
-          {others.map((p) => (
-            <PackingListCard key={p.id} packing={p} onTap={() => undefined} />
-          ))}
-        </Flex>
-      </div>
-      <div className="flex shrink-0 flex-col gap-2 border-t p-3">
-        <Button onClick={onScan}>
-          <ScanLine aria-hidden="true" />
-          Quét item vào kiện
-        </Button>
-        <Button variant="outline">
-          <Plus aria-hidden="true" />
-          Tạo kiện trống
-        </Button>
-      </div>
-    </>
+      <SectionHeader count={others.length}>Kiện đang mở</SectionHeader>
+      <Flex direction="col" gap="md">
+        {others.map((p) => (
+          <PackingListCard key={p.id} packing={p} onTap={() => undefined} />
+        ))}
+      </Flex>
+    </Flex>
   );
 }
 
-function OutboundTab({ onSeal, onHandoff }: { onSeal: () => void; onHandoff: () => void }) {
-  const [seg, setSeg] = React.useState<string>("seal");
+function PackingActions({ onScan }: { onScan: () => void }) {
   return (
-    <>
-      <div className="flex flex-1 flex-col gap-3 overflow-y-auto p-4">
-        {/* Segmented — outbound status */}
-        <ToggleGroup
-          type="single"
-          value={seg}
-          onValueChange={(v) => {
-            if (v) setSeg(v);
-          }}
-          className="bg-secondary/60 grid w-full grid-cols-3 gap-1 rounded-xl p-1"
-        >
+    <Flex direction="col" gap="sm" className="w-full">
+      <Button onClick={onScan}>
+        <ScanLine aria-hidden="true" />
+        Quét item vào kiện
+      </Button>
+      <Button variant="outline">
+        <Plus aria-hidden="true" />
+        Tạo kiện trống
+      </Button>
+    </Flex>
+  );
+}
+
+/**
+ * `seg` is lifted to the page: the segmented control lives in the scroll region while the verb it
+ * selects lives in the `actions` band, and the two are different MobileShell slots.
+ */
+function OutboundTab({ seg, setSeg }: { seg: string; setSeg: (v: string) => void }) {
+  return (
+    <Flex direction="col" gap="md">
+      {/* Segmented — outbound status */}
+      <ToggleGroup
+        type="single"
+        value={seg}
+        onValueChange={(v) => {
+          if (v) setSeg(v);
+        }}
+        className="bg-secondary/60 w-full rounded-xl"
+      >
+        <ResponsiveGrid columns={3} gap="xs">
           <ToggleGroupItem
             value="seal"
             className="h-9 rounded-xl whitespace-nowrap text-[var(--font-size-xs)]"
@@ -854,19 +864,21 @@ function OutboundTab({ onSeal, onHandoff }: { onSeal: () => void; onHandoff: ()
           >
             Đã bàn giao
           </ToggleGroupItem>
-        </ToggleGroup>
+        </ResponsiveGrid>
+      </ToggleGroup>
 
-        <SectionHeader count={OUTBOUND.length}>
-          {seg === "seal"
-            ? "Sẵn sàng niêm phong"
-            : seg === "handoff"
-              ? "Chờ bàn giao"
-              : "Đã bàn giao"}
-        </SectionHeader>
-        <Flex direction="col" gap="md">
-          {OUTBOUND.map((p) => (
-            <Card key={p.id} density="tight" className="rounded-xl">
-              <CardContent solo>
+      <SectionHeader count={OUTBOUND.length}>
+        {seg === "seal"
+          ? "Sẵn sàng niêm phong"
+          : seg === "handoff"
+            ? "Chờ bàn giao"
+            : "Đã bàn giao"}
+      </SectionHeader>
+      <Flex direction="col" gap="md">
+        {OUTBOUND.map((p) => (
+          <Card key={p.id} density="tight" className="rounded-xl">
+            <CardContent solo>
+              <Flex direction="col" gap="md">
                 <Flex align="center" justify="between" gap="sm">
                   <Text as="code" size="sm" weight="bold" tabular>
                     {p.code}
@@ -875,7 +887,7 @@ function OutboundTab({ onSeal, onHandoff }: { onSeal: () => void; onHandoff: ()
                     Sẵn sàng niêm phong
                   </Badge>
                 </Flex>
-                <Flex align="center" justify="between" gap="sm" className="mt-1">
+                <Flex align="center" justify="between" gap="sm">
                   <Text size="xs" tone="muted" tabular truncate>
                     {p.customer} · {p.city}
                   </Text>
@@ -883,8 +895,8 @@ function OutboundTab({ onSeal, onHandoff }: { onSeal: () => void; onHandoff: ()
                     ×{p.items} · {p.slot}
                   </Text>
                 </Flex>
-                <div className="mt-3">
-                  <Descriptions columns={1} className="gap-y-1">
+                <div>
+                  <Descriptions columns={1}>
                     <Descriptions.Item label="Vị trí" mono>
                       {p.slot}
                     </Descriptions.Item>
@@ -893,25 +905,34 @@ function OutboundTab({ onSeal, onHandoff }: { onSeal: () => void; onHandoff: ()
                     </Descriptions.Item>
                   </Descriptions>
                 </div>
-              </CardContent>
-            </Card>
-          ))}
-        </Flex>
-      </div>
-      <div className="flex shrink-0 gap-2 border-t p-3">
-        {seg === "handoff" ? (
-          <Button className="flex-1" onClick={onHandoff}>
-            <Truck aria-hidden="true" />
-            Xác nhận bàn giao
-          </Button>
-        ) : (
-          <Button className="flex-1" onClick={onSeal}>
-            <Check aria-hidden="true" />
-            Quét mã kiện · Niêm phong
-          </Button>
-        )}
-      </div>
-    </>
+              </Flex>
+            </CardContent>
+          </Card>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
+
+function OutboundActions({
+  seg,
+  onSeal,
+  onHandoff,
+}: {
+  seg: string;
+  onSeal: () => void;
+  onHandoff: () => void;
+}) {
+  return seg === "handoff" ? (
+    <Button className="flex-1" onClick={onHandoff}>
+      <Truck aria-hidden="true" />
+      Xác nhận bàn giao
+    </Button>
+  ) : (
+    <Button className="flex-1" onClick={onSeal}>
+      <Check aria-hidden="true" />
+      Quét mã kiện · Niêm phong
+    </Button>
   );
 }
 
@@ -923,6 +944,7 @@ export default function AgencyHandyShowcase() {
 
   const [selectMode, setSelectMode] = React.useState(false);
   const [selected, setSelected] = React.useState<Set<string>>(new Set());
+  const [seg, setSeg] = React.useState<string>("seal");
 
   const [lookupOpen, setLookupOpen] = React.useState(false);
   const [formOpen, setFormOpen] = React.useState(false);
@@ -933,111 +955,133 @@ export default function AgencyHandyShowcase() {
 
   const headerTitle = tab === "inbound" ? "Nhập kho" : tab === "packing" ? "Đóng gói" : "Xuất kho";
 
-  return (
-    <div className="bg-secondary/30 min-h-screen py-4">
-      <Toaster />
-      <PhoneFrame>
-        <StatusBar />
+  const exitSelect = () => {
+    setSelectMode(false);
+    setSelected(new Set());
+  };
 
-        {/* App header (52px) — title + iOS text-action select-mode entry (inbound only) */}
-        <header className="flex h-14 shrink-0 items-center justify-between border-b px-4">
-          <Heading level={3} as="h1" className="whitespace-nowrap">
-            {headerTitle}
-          </Heading>
-          <Flex align="center" gap="xs">
-            {tab === "inbound" && !selectMode ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  setSelectMode(true);
-                  setSelected(new Set());
-                }}
-              >
-                <Check aria-hidden="true" />
-                Chọn
-              </Button>
-            ) : null}
-            {/* State switcher — exposes the 4 list states at rest (showcase affordance) */}
-            {tab === "inbound" && !selectMode ? (
-              <ToggleGroup
-                type="single"
-                value={listState}
-                onValueChange={(v) => {
-                  if (v) setListState(v as ListState);
-                }}
-                aria-label="List state (showcase)"
-                className="flex gap-0.5"
-              >
-                {(["ready", "loading", "empty", "error"] as const).map((s) => (
-                  <ToggleGroupItem
-                    key={s}
-                    value={s}
-                    className="size-7 rounded-md p-0 text-[var(--font-size-2xs)] uppercase"
-                    title={s}
-                  >
-                    {s[0]}
-                  </ToggleGroupItem>
-                ))}
-              </ToggleGroup>
-            ) : null}
-          </Flex>
-        </header>
-
-        {/* Select-mode header strip — replaces the standard header context (inbound) */}
-        {selectMode ? (
-          <div className="flex h-10 shrink-0 items-center justify-between border-b bg-[color-mix(in_oklch,var(--primary)_5%,var(--background))] px-3">
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="閉じる"
-              onClick={() => {
-                setSelectMode(false);
-                setSelected(new Set());
-              }}
-            >
-              <X className="size-4" aria-hidden="true" strokeWidth={1.5} />
-            </Button>
-            <Text size="sm" mono tabular>
-              {selected.size} đã chọn
-            </Text>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setSelected(new Set(ITEMS.map((i) => i.id)))}
-            >
-              Chọn tất cả
-            </Button>
-          </div>
+  // SELECT MODE REPLACES THE APP BAR — it does not stack a second strip under it. That is the
+  // platform pattern on both iOS and Android, and it is what the `header` slot is for: one bar to
+  // read at a time. Before gh#354 this file rendered the title bar AND a contextual strip, because
+  // there was no bar to swap.
+  const header = selectMode ? (
+    <Flex align="center" justify="between" gap="xs" className="w-full">
+      <Button variant="ghost" size="icon-sm" aria-label="Thoát chế độ chọn" onClick={exitSelect}>
+        <X className="size-4" aria-hidden="true" strokeWidth={1.5} />
+      </Button>
+      <Text size="sm" mono tabular>
+        {selected.size} đã chọn
+      </Text>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => setSelected(new Set(ITEMS.map((i) => i.id)))}
+      >
+        Chọn tất cả
+      </Button>
+    </Flex>
+  ) : (
+    <Flex align="center" justify="between" gap="xs" className="w-full">
+      <Heading level={3} as="h1" className="whitespace-nowrap">
+        {headerTitle}
+      </Heading>
+      <Flex align="center" gap="xs">
+        {tab === "inbound" ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              setSelectMode(true);
+              setSelected(new Set());
+            }}
+          >
+            <Check aria-hidden="true" />
+            Chọn
+          </Button>
         ) : null}
+        {/* State switcher — exposes the 4 list states at rest (showcase affordance) */}
+        {tab === "inbound" ? (
+          <ToggleGroup
+            type="single"
+            value={listState}
+            onValueChange={(v) => {
+              if (v) setListState(v as ListState);
+            }}
+            aria-label="List state (showcase)"
+          >
+            <Flex gap="xs">
+              {(["ready", "loading", "empty", "error"] as const).map((s) => (
+                <ToggleGroupItem
+                  key={s}
+                  value={s}
+                  className="size-7 rounded-md text-[var(--font-size-2xs)] uppercase"
+                  title={s}
+                >
+                  {s[0]}
+                </ToggleGroupItem>
+              ))}
+            </Flex>
+          </ToggleGroup>
+        ) : null}
+      </Flex>
+    </Flex>
+  );
 
+  const actions =
+    tab === "inbound" ? (
+      <InboundActions
+        selectMode={selectMode}
+        selected={selected}
+        onExitSelect={exitSelect}
+        onScan={() => setLookupOpen(true)}
+        onAdd={() => setFormOpen(true)}
+        onAssign={() => setPickerOpen(true)}
+      />
+    ) : tab === "packing" ? (
+      <PackingActions onScan={() => setLookupOpen(true)} />
+    ) : (
+      <OutboundActions
+        seg={seg}
+        onSeal={() => setSealOpen(true)}
+        onHandoff={() => setHandoffOpen(true)}
+      />
+    );
+
+  return (
+    <>
+      <Toaster />
+      {/* The whole phone is ONE primitive now: five bands, no Card frame, no hand-rolled scroll box,
+       * no `min-h-screen` wrapper. The shell is the document's only scroll container and every band
+       * pads itself out of the device safe areas. */}
+      <MobileShell
+        statusBar={<StatusBar />}
+        header={header}
+        actions={actions}
+        tabBar={
+          <TabBar
+            active={tab}
+            onChange={(id) => {
+              setTab(id);
+              exitSelect();
+            }}
+          />
+        }
+      >
         {tab === "inbound" ? (
           <InboundTab
             state={listState}
             onRetry={() => setListState("ready")}
             selectMode={selectMode}
-            setSelectMode={setSelectMode}
             selected={selected}
             setSelected={setSelected}
             onScan={() => setLookupOpen(true)}
-            onAdd={() => setFormOpen(true)}
-            onAssign={() => setPickerOpen(true)}
           />
         ) : tab === "packing" ? (
-          <PackingTab onScan={() => setLookupOpen(true)} />
+          <PackingTab />
         ) : (
-          <OutboundTab onSeal={() => setSealOpen(true)} onHandoff={() => setHandoffOpen(true)} />
+          <OutboundTab seg={seg} setSeg={setSeg} />
         )}
-
-        <TabBar
-          active={tab}
-          onChange={(id) => {
-            setTab(id);
-            setSelectMode(false);
-            setSelected(new Set());
-          }}
-        />
-      </PhoneFrame>
+      </MobileShell>
 
       {/* Sheets */}
       <ItemLookupSheet open={lookupOpen} onOpenChange={setLookupOpen} />
@@ -1067,6 +1111,6 @@ export default function AgencyHandyShowcase() {
           toast.success("Đã bàn giao PKG-000037 · 16:24");
         }}
       />
-    </div>
+    </>
   );
 }