@isi-ui7/bos7-shared 0.3.10 → 0.3.11

package/dist/crud-types.d.ts

@@ -75,6 +75,22 @@ export type CrudListSchema = {
     columns: Record<string, unknown>;
     popupMenuItems: CrudPopupMenuItem[];
     addButtonLabel: string;
+    /**
+     * Tampilkan tombol "Tambah" di toolbar daftar. Default **true**.
+     *
+     * Ada karena sebagian modul menaruh entri "… Baru" di SIDE NAV, sehingga
+     * tombol di toolbar jadi jalan KEDUA ke halaman yang sama. Dua jalan ke satu
+     * halaman bukan sekadar mubazir: keduanya harus dijaga tetap sama, dan yang
+     * satu akan tertinggal saat rutenya berubah — tanpa berbunyi sebagai galat.
+     *
+     * Opsional dan default true SUPAYA 109 pemakai lain nol berubah; hanya yang
+     * menyetel `false` yang kehilangan tombolnya.
+     *
+     * ⚠️ Jangan setel `false` kalau modulnya nol punya jalur lain ke halaman
+     * create — halamannya tetap ada, hanya nol bisa dicapai siapa pun, dan itu
+     * bentuk kerusakan yang nol terlihat di uji mana pun.
+     */
+    showAddButton?: boolean;
     /** Enable column sorting. Defaults to true. */
     showSort?: boolean;
     /** Enable search bar. Defaults to true. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.7",
+    "@isi-ui7/corporate-themes": ">=0.2.8",
     "@isi-ui7/data-table": ">=0.2.5",
     "@isi-ui7/editable-table": ">=0.2.3",
     "@isi-ui7/i18n": ">=0.2.3",
@@ -106,14 +106,14 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.7",
+    "@isi-ui7/corporate-themes": "0.2.8",
     "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/editable-table": "0.2.3",
-    "@isi-ui7/i18n": "0.2.3",
     "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/modal-manager": "0.2.2",
-    "@isi-ui7/ui-shell": "0.2.8",
-    "@isi-ui7/realtime": "0.2.3"
+    "@isi-ui7/i18n": "0.2.3",
+    "@isi-ui7/realtime": "0.2.3",
+    "@isi-ui7/ui-shell": "0.2.8"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
@@ -127,8 +127,8 @@
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
     "@isi-ui7/data-table": "0.2.5",
-    "@isi-ui7/editable-table": "0.2.3",
-    "@isi-ui7/lookup-input": "0.2.4"
+    "@isi-ui7/lookup-input": "0.2.4",
+    "@isi-ui7/editable-table": "0.2.3"
   },
   "scripts": {
     "build": "vite build",

package/src/crud-components.tsx

@@ -19,7 +19,7 @@ import {
 import { ServerDataTable } from "@isi-ui7/data-table";
 import type { I_DataTblColumn } from "@isi-ui7/data-table";
 import type { CrudCustomActionSchema, CrudDeleteSchema, CrudListSchema } from "./crud-types";
-import type { CrudForm, FormMode } from "./form-types";
+import type { CrudForm, FormMode, FormPageDef } from "./form-types";
 import type { Ui7FormDensity } from "./style-contract";
 import { SchemaFormRenderer } from "./form-renderer";
 import { WizardStepper, type WizardStepState } from "./wizard-stepper";
@@ -134,9 +134,11 @@ export function SharedCrudListPage({
                 </div>
               ) : null}
               {toolbarExtra}
-              <Button renderIcon={Add} size="sm" onClick={onAdd}>
-                {schema.addButtonLabel || labels.next}
-              </Button>
+              {(schema.showAddButton ?? true) ? (
+                <Button renderIcon={Add} size="sm" onClick={onAdd}>
+                  {schema.addButtonLabel || labels.next}
+                </Button>
+              ) : null}
             </div>
           }
         />
@@ -501,15 +503,21 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
    * dilewati: footer mode-view sengaja nol tombol Lanjut, jadi satu-satunya
    * jalan maju adalah menebak bahwa stepper-nya bisa diklik.
    *
-   * Karena itu di luar `create` wizard dirender DATAR: seluruh halaman
-   * berurutan dalam satu aliran, tanpa stepper dan tanpa Lanjut/Kembali.
-   * Yang HILANG hanya navigasinya; isinya tidak ada yang dibuang.
+   * Karena itu di luar `create` wizard dirender sebagai TAB biasa: halaman
+   * tetap terpisah dan bisa dilompati bebas, tanpa stepper, tanpa urutan
+   * wajib, tanpa Lanjut/Kembali. Yang HILANG hanya PEMANDUANNYA; isinya
+   * tidak ada yang dibuang.
+   *
+   * (2026-08-19 ini sempat dirender DATAR — satu aliran panjang. Diganti
+   * 2026-08-20: pada form 5 langkah hasilnya 13 panel beruntun dalam satu
+   * kolom yang sangat panjang. Yang dilarang adalah wizard MEMANDU, bukan
+   * halamannya terpisah; tab memisahkan tanpa memandu.)
    *
    * Aman terhadap validasi: `handleSave` memakai `validateAll()`, yang sudah
    * mengumpulkan field dari SELURUH halaman tanpa peduli halaman aktif —
-   * jadi menyimpan dari bentuk datar memeriksa hal yang sama persis.
+   * jadi menyimpan dari bentuk bertab memeriksa hal yang sama persis.
    *
-   * Keputusan PM 2026-08-19. Sengaja dipasang di sini, BUKAN di skema tiap
+   * Keputusan PM 2026-08-19, direvisi 2026-08-20. Sengaja dipasang di sini, BUKAN di skema tiap
    * app: ini keputusan tentang cara me-render sebuah layout, dan menaruhnya
    * di skema berarti tiap app harus mengingat untuk mengulanginya.
    */
@@ -534,117 +542,80 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
       );
     }
 
-    if (layout.type === "tabs") {
-      return (
-        <PageBody>
-          {errBanner}
-          <div>
-            <div
-              role="tablist"
-              style={{
-                display: "flex",
-                borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
-                marginBottom: 0,
-              }}
-            >
-              {layout.pages.map((pg, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  role="tab"
-                  aria-selected={i === activeTab}
-                  onClick={() => setActiveTab(i)}
-                  style={{
-                    padding: "0.75rem 1rem",
-                    background: "none",
-                    border: "none",
-                    borderBottom:
-                      i === activeTab
-                        ? "2px solid var(--cds-interactive-01, #0f62fe)"
-                        : "2px solid transparent",
-                    marginBottom: "-1px",
-                    cursor: "pointer",
-                    fontSize: "0.875rem",
-                    lineHeight: "1.25rem",
-                    fontWeight: i === activeTab ? 600 : 400,
-                    color:
-                      i === activeTab
-                        ? "var(--cds-text-primary, #161616)"
-                        : "var(--cds-text-secondary, #525252)",
-                  }}
-                >
-                  {pg.label}
-                </button>
-              ))}
-            </div>
-            {layout.pages.map((pg, i) => (
-              <div key={i} style={{ display: i === activeTab ? "block" : "none" }}>
-                <SchemaFormRenderer
-                  mode={mode}
-                  value={form}
-                  sections={pg.sections}
-                  errors={fieldErrors}
-                  disabled={saving}
-                  onChange={setForm}
-                  density={density}
-                  width={width}
-                />
-              </div>
-            ))}
-          </div>
-        </PageBody>
-      );
-    }
-
-    // Wizard di luar `create` — datar, tanpa stepper. Lihat `wizardNav`.
-    //
-    // Syaratnya ditulis LENGKAP (`layout.type === "wizard" && !wizardNav`),
-    // bukan `!wizardNav` saja. Keduanya setara hari ini, tapi bentuk pendek
-    // benar hanya karena `single-page` dan `tabs` sudah return di atas — ia
-    // cabang *sisa*, bukan cabang *wizard*. Varian layout ke-5 yang lupa
-    // ditaruh di atas sini akan ikut dirender datar tanpa galat, tanpa lint,
-    // tanpa uji yang menahan. Dengan bentuk lengkap, kelalaian yang sama
-    // menjadi galat `tsc` di `layout.pages` beberapa baris di bawah.
-    if (layout.type === "wizard" && !wizardNav) {
-      return (
-        <PageBody>
-          {errBanner}
-          {layout.pages.map((pg, i) => (
-            <div key={i} style={{ marginBottom: "2.5rem" }}>
-              {/* Label halaman tetap dirender — sebagai JUDUL KELOMPOK, bukan
-                  navigasi. Membuang steppernya tidak boleh ikut membuang satu-
-                  satunya tempat `pg.label`/`pg.sublabel` pernah tampil: pada
-                  form 5 langkah, hasilnya 13 panel beruntun tanpa satu pun
-                  pemisah tingkat-halaman. Yang dilarang PM adalah navigasinya,
-                  bukan judulnya. */}
-              <div
+    /**
+     * Halaman ber-tab. Dipakai DUA layout: `tabs`, dan `wizard` di luar
+     * `create` (lihat `wizardNav`).
+     *
+     * Sengaja SATU fungsi, bukan dua blok kembar. Keduanya wajib tetap
+     * terlihat sama, dan salinan kedua akan tertinggal saat yang satu
+     * disunting — tanpa berbunyi sebagai galat, karena keduanya tetap
+     * me-render tab yang bekerja.
+     */
+    const renderTabbedPages = (pages: FormPageDef<TData>[]) => (
+      <PageBody>
+        {errBanner}
+        <div>
+          <div
+            role="tablist"
+            style={{
+              display: "flex",
+              borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
+              marginBottom: 0,
+            }}
+          >
+            {pages.map((pg, i) => (
+              <button
+                key={i}
+                type="button"
+                role="tab"
+                aria-selected={i === activeTab}
+                onClick={() => setActiveTab(i)}
                 style={{
-                  marginBottom: "1rem",
-                  paddingBottom: "0.5rem",
-                  borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
+                  padding: "0.75rem 1rem",
+                  background: "none",
+                  border: "none",
+                  borderBottom:
+                    i === activeTab
+                      ? "2px solid var(--cds-interactive-01, #0f62fe)"
+                      : "2px solid transparent",
+                  marginBottom: "-1px",
+                  cursor: "pointer",
+                  fontSize: "0.875rem",
+                  lineHeight: "1.25rem",
+                  fontWeight: i === activeTab ? 600 : 400,
+                  color:
+                    i === activeTab
+                      ? "var(--cds-text-primary, #161616)"
+                      : "var(--cds-text-secondary, #525252)",
                 }}
               >
+                {pg.label}
+              </button>
+            ))}
+          </div>
+          {pages.map((pg, i) => (
+            <div
+              key={i}
+              role="tabpanel"
+              style={{ display: i === activeTab ? "block" : "none" }}
+            >
+              {/* `sublabel` dirender di dalam panel, bukan di tombol tab —
+                  tombolnya cuma memuat label supaya barisnya tidak melebar.
+                  Ia HARUS ada di salah satu dari keduanya: pada wizard, tempat
+                  `sublabel` pernah tampil adalah steppernya, dan stepper itu
+                  yang barusan dibuang. Tanpa baris ini 5 string lenyap dari
+                  layar tanpa satu pun galat. */}
+              {pg.sublabel ? (
                 <div
                   style={{
-                    fontSize: "1rem",
-                    fontWeight: 600,
-                    color: "var(--cds-text-primary, #161616)",
+                    fontSize: "0.75rem",
+                    color: "var(--cds-text-secondary, #525252)",
+                    margin: "0.75rem 0 0",
                   }}
                 >
-                  {pg.label}
+                  {pg.sublabel}
                 </div>
-                {pg.sublabel ? (
-                  <div
-                    style={{
-                      fontSize: "0.75rem",
-                      color: "var(--cds-text-secondary, #525252)",
-                      marginTop: "0.125rem",
-                    }}
-                  >
-                    {pg.sublabel}
-                  </div>
-                ) : null}
-              </div>
+              ) : null}
               <SchemaFormRenderer
                 mode={mode}
                 value={form}
@@ -654,16 +625,33 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
                 onChange={setForm}
                 density={density}
                 // `width` apa adanya, BUKAN `width ?? "full"` seperti cabang
-                // wizard. `full` di sana berarti "penuhi kolom KIRI", jalan
-                // keluar untuk ruang yang dipersempit stepper. Di sini nol
-                // stepper, jadi alasannya hilang dan default kontrak
-                // ("two-thirds") kembali berlaku.
+                // wizard ber-stepper. `full` di sana berarti "penuhi kolom
+                // KIRI", jalan keluar untuk ruang yang dipersempit stepper.
+                // Di sini nol stepper, jadi alasannya hilang dan default
+                // kontrak ("two-thirds") kembali berlaku.
                 width={width}
               />
             </div>
           ))}
-        </PageBody>
-      );
+        </div>
+      </PageBody>
+    );
+
+    if (layout.type === "tabs") {
+      return renderTabbedPages(layout.pages);
+    }
+
+    // Wizard di luar `create`. Lihat `wizardNav`.
+    //
+    // Syaratnya ditulis LENGKAP (`layout.type === "wizard" && !wizardNav`),
+    // bukan `!wizardNav` saja. Keduanya setara hari ini, tapi bentuk pendek
+    // benar hanya karena `single-page` dan `tabs` sudah return di atas — ia
+    // cabang *sisa*, bukan cabang *wizard*. Varian layout ke-5 yang lupa
+    // ditaruh di atas sini akan ikut dirender bertab tanpa galat, tanpa lint,
+    // tanpa uji yang menahan. Dengan bentuk lengkap, kelalaian yang sama
+    // menjadi galat `tsc` di `layout.pages`.
+    if (layout.type === "wizard" && !wizardNav) {
+      return renderTabbedPages(layout.pages);
     }
 
     const currentPage = layout.pages[page];

package/src/crud-types.ts

@@ -56,6 +56,22 @@ export type CrudListSchema = {
   columns: Record<string, unknown>;
   popupMenuItems: CrudPopupMenuItem[];
   addButtonLabel: string;
+  /**
+   * Tampilkan tombol "Tambah" di toolbar daftar. Default **true**.
+   *
+   * Ada karena sebagian modul menaruh entri "… Baru" di SIDE NAV, sehingga
+   * tombol di toolbar jadi jalan KEDUA ke halaman yang sama. Dua jalan ke satu
+   * halaman bukan sekadar mubazir: keduanya harus dijaga tetap sama, dan yang
+   * satu akan tertinggal saat rutenya berubah — tanpa berbunyi sebagai galat.
+   *
+   * Opsional dan default true SUPAYA 109 pemakai lain nol berubah; hanya yang
+   * menyetel `false` yang kehilangan tombolnya.
+   *
+   * ⚠️ Jangan setel `false` kalau modulnya nol punya jalur lain ke halaman
+   * create — halamannya tetap ada, hanya nol bisa dicapai siapa pun, dan itu
+   * bentuk kerusakan yang nol terlihat di uji mana pun.
+   */
+  showAddButton?: boolean;
   /** Enable column sorting. Defaults to true. */
   showSort?: boolean;
   /** Enable search bar. Defaults to true. */

package/src/list-add-button.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+// ServerDataTable menarik jaringan & Carbon DataTable penuh; yang diuji di sini
+// TOOLBAR-nya, jadi tabelnya dimock dan `toolbarActions` dirender apa adanya.
+vi.mock("@isi-ui7/data-table", () => ({
+  ServerDataTable: ({ toolbarActions }: { toolbarActions?: React.ReactNode }) => (
+    <div data-testid="tabel">{toolbarActions}</div>
+  ),
+}));
+
+import { SharedCrudListPage } from "./crud-components";
+import type { CrudListSchema } from "./crud-types";
+
+const dasar: CrudListSchema = {
+  title: "Daftar",
+  apiPath: "/api/x",
+  columns: { a: { title: "A" } },
+  popupMenuItems: [],
+  addButtonLabel: "Tambah Sesuatu",
+};
+
+/**
+ * `showAddButton` — opsional, default TRUE.
+ *
+ * Ada karena sebagian modul menaruh entri "… Baru" di SIDE NAV, sehingga tombol
+ * toolbar jadi jalan KEDUA ke halaman yang sama. Dua jalan ke satu halaman harus
+ * dijaga tetap sama, dan yang satu akan tertinggal saat rutenya berubah — tanpa
+ * berbunyi sebagai galat.
+ */
+describe("tombol Tambah di daftar", () => {
+  it("DEFAULT tetap tampil — 109 pemakai lain nol boleh berubah", () => {
+    render(<SharedCrudListPage schema={dasar} onAdd={() => {}} onPopupClick={() => {}} />);
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).not.toBeNull();
+  });
+
+  it("`showAddButton: true` eksplisit juga tampil", () => {
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, showAddButton: true }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).not.toBeNull();
+  });
+
+  it("🔑 `showAddButton: false` MENYEMBUNYIKANNYA", () => {
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, showAddButton: false }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).toBeNull();
+  });
+
+  it("kontrol negatif — toolbarExtra TETAP dirender saat tombol Tambah disembunyikan", () => {
+    // Kalau perbaikannya diterapkan terlalu lebar (mis. seluruh blok toolbar
+    // dibungkus kondisi), aksi toolbar lain ikut hilang — dan hilangnya nol
+    // berbunyi karena tabelnya tetap tampil.
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, showAddButton: false }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+        toolbarExtra={<button type="button">Aksi Lain</button>}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /Aksi Lain/ })).not.toBeNull();
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).toBeNull();
+  });
+});

package/src/wizard-mode-nav.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 
 // Dimock supaya mode `edit`/`view` tidak menggantung di InlineLoading: tanpa
 // `loadApiPath` yang selesai, `loading` tidak pernah kembali false dan yang
@@ -40,6 +40,27 @@ const stepper = () => screen.queryByRole("navigation");
 // ketiga mode, sehingga uji ini membandingkan hal yang sama di semua mode.
 const fieldTampil = (nama: string) => screen.queryByText(nama) !== null;
 
+/**
+ * ADA DI DOM ≠ TERLIHAT.
+ *
+ * Panel tab yang tidak aktif tetap dirender, hanya `display: none`. Jadi
+ * `queryByText` menemukannya, dan uji yang hanya bertanya "ada?" akan HIJAU
+ * untuk halaman yang tidak bisa dilihat siapa pun. Helper ini menaiki pohon ke
+ * `[role=tabpanel]` terdekat dan membaca `display`-nya, sehingga yang diukur
+ * adalah apa yang benar-benar tampil di layar.
+ *
+ * `null` = teksnya tidak ada sama sekali (beda dari "ada tapi tersembunyi").
+ */
+const panelTampil = (nama: string): boolean | null => {
+  const el = screen.queryByText(nama);
+  if (!el) return null;
+  const panel = el.closest('[role="tabpanel"]') as HTMLElement | null;
+  if (!panel) return true; // bukan layout bertab — terender langsung
+  return panel.style.display !== "none";
+};
+
+const tabs = () => screen.queryAllByRole("tab");
+
 beforeEach(() => {
   vi.clearAllMocks();
 });
@@ -55,17 +76,22 @@ describe("navigasi wizard hanya pada mode create", () => {
     expect(fieldTampil("Field Tiga")).toBe(false);
   });
 
-  it("view — stepper TIDAK ada, dan SELURUH halaman terbaca sekaligus", async () => {
+  it("view — stepper TIDAK ada, diganti TAB, dan tiap halaman terjangkau", async () => {
     render(<CrudSchemaPage schema={schema} mode="view" />);
     await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
     expect(stepper(), "view tidak boleh punya navigasi langkah").toBeNull();
-    // Inti perbaikannya: nol navigasi TIDAK boleh berarti isi yang hilang.
-    // Sebelum ini, `view` merender satu halaman saja sementara footernya nol
-    // tombol Lanjut — jadi langkah 2-5 tidak bisa dibaca sama sekali.
-    for (const label of ["Field Satu", "Field Dua", "Field Tiga"]) {
-      expect(fieldTampil(label), `${label} harus terbaca di view`).toBe(true);
-    }
+    expect(tabs().length, "wizard di luar create harus jadi tab, bukan datar").toBe(3);
+
+    // Inti perbaikannya: nol stepper TIDAK boleh berarti isi yang tak
+    // terjangkau. Sebelum ini `view` merender satu halaman saja sementara
+    // footernya nol tombol Lanjut — langkah 2-5 tidak bisa dibaca sama sekali.
+    expect(panelTampil("Field Satu")).toBe(true);
+    expect(panelTampil("Field Tiga"), "halaman 3 belum dibuka").toBe(false);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Langkah Tiga" }));
+    expect(panelTampil("Field Tiga"), "klik tab 3 harus menampilkannya").toBe(true);
+    expect(panelTampil("Field Satu"), "tab 1 harus ikut tertutup").toBe(false);
   });
 
   // Ditambahkan setelah verifikasi adversarial membantah klaim "nol isi yang
@@ -79,12 +105,20 @@ describe("navigasi wizard hanya pada mode create", () => {
       render(<CrudSchemaPage schema={schema} mode={mode} />);
       await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
-      expect(stepper(), "judul kelompok bukan navigasi").toBeNull();
+      expect(stepper(), "tab bukan landmark navigasi").toBeNull();
+      // Label halaman kini jadi teks tombol tab.
       for (const l of ["Langkah Satu", "Langkah Dua", "Langkah Tiga"]) {
-        expect(fieldTampil(l), `${l} hilang dari ${mode}`).toBe(true);
+        expect(
+          tabs().some((t) => t.textContent === l),
+          `${l} hilang dari ${mode}`,
+        ).toBe(true);
       }
-      for (const s of ["Sub Satu", "Sub Dua", "Sub Tiga"]) {
-        expect(fieldTampil(s), `sublabel ${s} hilang dari ${mode}`).toBe(true);
+      // Sublabel TIDAK muat di tombol tab, jadi ia pindah ke dalam panel.
+      // Diperiksa terpisah justru karena itu: tempatnya berbeda dari labelnya,
+      // dan tempat yang berbeda adalah tempat yang bisa terlupa.
+      for (const [i, sub] of ["Sub Satu", "Sub Dua", "Sub Tiga"].entries()) {
+        fireEvent.click(tabs()[i]);
+        expect(panelTampil(sub), `sublabel ${sub} hilang dari ${mode}`).toBe(true);
       }
     },
   );
@@ -94,19 +128,22 @@ describe("navigasi wizard hanya pada mode create", () => {
     await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
     expect(stepper(), "edit tidak boleh punya navigasi langkah").toBeNull();
-    expect(fieldTampil("Field Tiga")).toBe(true);
+    expect(tabs().length).toBe(3);
+    fireEvent.click(screen.getByRole("tab", { name: "Langkah Tiga" }));
+    expect(panelTampil("Field Tiga")).toBe(true);
 
     const tombol = screen.getAllByRole("button").map((b) => b.textContent ?? "");
     expect(tombol.some((t) => /lanjut|next/i.test(t)), `masih ada tombol Lanjut: ${tombol.join("|")}`).toBe(false);
     expect(tombol.some((t) => /kembali|prev/i.test(t)), `masih ada tombol Kembali: ${tombol.join("|")}`).toBe(false);
   });
 
-  // Kontrol kedua, dan ini yang penting: `tabs` juga punya `pages`, jadi ia
-  // kandidat paling mungkin ikut terseret kalau urutan cabang render bergeser.
-  // Tanpa kontrol ini, memindahkan cabang datar ke atas cabang `tabs` akan
-  // meratakan 4 layar bos7-enterprise/bos7-financing tanpa satu pun galat.
-  it("kontrol negatif — layout tabs tetap bertab, tidak ikut diratakan", async () => {
-    const tabs: CrudForm<D> = {
+  // Kontrol negatif — kini SEMAKIN perlu, bukan semakin tidak: sejak kedua
+  // layout memakai perender yang SAMA, cacat di perender itu memukul keduanya
+  // sekaligus, dan uji wizard sendirian tidak akan menunjukkan bahwa 4 layar
+  // bos7-enterprise/bos7-financing ikut rusak. `tabs` di sini punya 2 halaman
+  // (wizard 3) supaya keduanya tidak bisa saling menyamar.
+  it("kontrol negatif — layout tabs ikut sehat memakai perender bersama", async () => {
+    const skemaTabs: CrudForm<D> = {
       ...schema,
       layout: {
         type: "tabs",
@@ -116,11 +153,11 @@ describe("navigasi wizard hanya pada mode create", () => {
         ],
       },
     };
-    render(<CrudSchemaPage schema={tabs} mode="view" />);
+    render(<CrudSchemaPage schema={skemaTabs} mode="view" />);
     await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
     // Tab masih tab: tombol role=tab ada, dan hanya tab aktif yang terlihat.
-    expect(screen.getAllByRole("tab").length, "tab hilang — cabang datar menelan layout tabs").toBe(2);
+    expect(tabs().length, "layout tabs kehilangan tabnya").toBe(2);
     expect(stepper()).toBeNull();
   });