@isi-ui7/bos7-shared 0.3.9 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -9,11 +9,11 @@
     "directory": "packages/bos7-shared"
   },
   "type": "module",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
+    ".": "./dist/index.js",
     "./auth7": "./src/auth7/index.ts",
     "./page-layout": "./src/page-layout.tsx",
     "./modal-layout": "./src/modal-layout.tsx",
@@ -50,85 +50,28 @@
     "./bff/health": "./src/bff/health.ts",
     "./observability/otel-init": "./src/observability/otel-init.ts",
     "./form-types": "./src/form-types.ts",
-    "./form-value-schema": "./src/form-value-schema.ts",
     "./form-numeric": "./src/form-numeric.ts",
     "./form-renderer": "./src/form-renderer.tsx",
     "./form-renderer-utils": "./src/form-renderer-utils.ts",
     "./form-rules": "./src/form-rules.ts",
     "./i18n": "./src/i18n.tsx",
     "./workflow/use-crud-form": "./src/workflow/use-crud-form.ts",
-    "./styles": "./src/form-contract.css"
+    "./styles": "./src/form-contract.css",
+    "./form-value-schema": "./src/form-value-schema.ts"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
-    "access": "public",
-    "main": "dist/index.js",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "exports": {
-      ".": "./dist/index.js",
-      "./auth7": "./src/auth7/index.ts",
-      "./page-layout": "./src/page-layout.tsx",
-      "./modal-layout": "./src/modal-layout.tsx",
-      "./form-layout": "./src/form-layout.tsx",
-      "./backend": "./src/backend.ts",
-      "./export": "./src/export.ts",
-      "./types/notification": "./src/types/notification.ts",
-      "./nats/client": "./src/nats/client.ts",
-      "./event-bus": "./src/event-bus/index.ts",
-      "./event-bus/useEventBus": "./src/event-bus/useEventBus.ts",
-      "./api": "./src/api.ts",
-      "./types/core": "./src/types/core.ts",
-      "./style-contract": "./src/style-contract.ts",
-      "./crud-components": "./src/crud-components.tsx",
-      "./workflow/backend": "./src/workflow/backend.ts",
-      "./workflow/notif7": "./src/workflow/notif7.ts",
-      "./workflow/api-client": "./src/workflow/api-client.ts",
-      "./workflow/starter": "./src/workflow/starter.ts",
-      "./workflow/use-workflow-tracker": "./src/workflow/use-workflow-tracker.ts",
-      "./workflow/crud-client": "./src/workflow/crud-client.ts",
-      "./data-table/cursor-adapter": "./src/data-table/cursor-adapter.ts",
-      "./data-table/proxy": "./src/data-table/proxy.ts",
-      "./notification/routing": "./src/notification/routing.ts",
-      "./shell/interaction": "./src/shell/interaction.ts",
-      "./shell/branch": "./src/shell/branch.ts",
-      "./notif7": "./src/notif7.ts",
-      "./shell/provider": "./src/shell/provider.tsx",
-      "./shell/app-shell-layout": "./src/shell/app-shell-layout.tsx",
-      "./notifications-bff": "./src/notifications-bff.ts",
-      "./bff/auth-me": "./src/bff/auth-me.ts",
-      "./bff/auth-refresh": "./src/bff/auth-refresh.ts",
-      "./bff/auth-logout": "./src/bff/auth-logout.ts",
-      "./bff/auth-preferences": "./src/bff/auth-preferences.ts",
-      "./bff/health": "./src/bff/health.ts",
-      "./observability/otel-init": "./src/observability/otel-init.ts",
-      "./form-types": "./src/form-types.ts",
-      "./form-numeric": "./src/form-numeric.ts",
-      "./form-renderer": "./src/form-renderer.tsx",
-      "./form-renderer-utils": "./src/form-renderer-utils.ts",
-      "./form-rules": "./src/form-rules.ts",
-      "./i18n": "./src/i18n.tsx",
-      "./workflow/use-crud-form": "./src/workflow/use-crud-form.ts",
-      "./styles": "./src/form-contract.css",
-      "./form-value-schema": "./src/form-value-schema.ts"
-    }
+    "access": "public"
   },
   "files": [
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "pnpm run build",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "test": "vitest run --passWithNoTests",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.6",
-    "@isi-ui7/data-table": ">=0.2.4",
+    "@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",
@@ -144,14 +87,6 @@
     "@carbon/react": "^1.97.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.39.0",
-    "@isi-ui7/corporate-themes": "workspace:*",
-    "@isi-ui7/data-table": "workspace:*",
-    "@isi-ui7/editable-table": "workspace:*",
-    "@isi-ui7/i18n": "workspace:*",
-    "@isi-ui7/lookup-input": "workspace:*",
-    "@isi-ui7/modal-manager": "workspace:*",
-    "@isi-ui7/realtime": "workspace:*",
-    "@isi-ui7/ui-shell": "workspace:*",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.0",
@@ -170,14 +105,19 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
-    "vitest": "^1.0.0"
+    "vitest": "^1.0.0",
+    "@isi-ui7/corporate-themes": "0.2.8",
+    "@isi-ui7/data-table": "0.2.5",
+    "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.4",
+    "@isi-ui7/modal-manager": "0.2.2",
+    "@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",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/data-table": "workspace:*",
-    "@isi-ui7/editable-table": "workspace:*",
-    "@isi-ui7/lookup-input": "workspace:*",
     "@opentelemetry/auto-instrumentations-node": "^0.57.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
     "@opentelemetry/sdk-node": "^0.57.0",
@@ -185,6 +125,15 @@
     "exceljs": "^4.4.0",
     "jose": "^5.9.6",
     "jspdf": "^4.2.1",
-    "jspdf-autotable": "^5.0.7"
+    "jspdf-autotable": "^5.0.7",
+    "@isi-ui7/data-table": "0.2.5",
+    "@isi-ui7/lookup-input": "0.2.4",
+    "@isi-ui7/editable-table": "0.2.3"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/crud-components.tsx

@@ -10,8 +10,6 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-  ProgressIndicator,
-  ProgressStep,
   Select,
   SelectItem,
   TextArea,
@@ -21,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";
@@ -136,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>
           }
         />
@@ -489,6 +489,40 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
 
   const layout = schema.layout;
 
+  /**
+   * Wizard adalah alat bantu PENGISIAN, bukan cara menyusun halaman.
+   *
+   * Ia ada untuk memandu petugas melalui formulir panjang yang belum pernah
+   * diisi, dan — pada registrasi nasabah — untuk MENAHAN langkah berikutnya
+   * sampai gerbang `canLeavePage` terpenuhi. Kedua alasan itu hanya berlaku
+   * saat data DIBUAT.
+   *
+   * Pada `edit` dan `view` datanya sudah ada dan sudah lolos gerbangnya.
+   * Memaksa operator melangkah lima kali untuk membaca satu field di langkah
+   * 5 bukan panduan, ia penghalang — dan pada `view` bahkan tidak bisa
+   * 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 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 bertab memeriksa hal yang sama persis.
+   *
+   * 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.
+   */
+  const wizardNav = layout.type === "wizard" && mode === "create";
+
   const renderBody = () => {
     if (layout.type === "single-page") {
       return (
@@ -508,66 +542,116 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
       );
     }
 
-    if (layout.type === "tabs") {
-      return (
-        <PageBody>
-          {errBanner}
-          <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={{
+                  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
-              role="tablist"
-              style={{
-                display: "flex",
-                borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
-                marginBottom: 0,
-              }}
+              key={i}
+              role="tabpanel"
+              style={{ display: i === activeTab ? "block" : "none" }}
             >
-              {layout.pages.map((pg, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  role="tab"
-                  aria-selected={i === activeTab}
-                  onClick={() => setActiveTab(i)}
+              {/* `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={{
-                    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)",
+                    fontSize: "0.75rem",
+                    color: "var(--cds-text-secondary, #525252)",
+                    margin: "0.75rem 0 0",
                   }}
                 >
-                  {pg.label}
-                </button>
-              ))}
+                  {pg.sublabel}
+                </div>
+              ) : null}
+              <SchemaFormRenderer
+                mode={mode}
+                value={form}
+                sections={pg.sections}
+                errors={fieldErrors}
+                disabled={saving}
+                onChange={setForm}
+                density={density}
+                // `width` apa adanya, BUKAN `width ?? "full"` seperti cabang
+                // 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>
-            {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>
-      );
+          ))}
+        </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];
@@ -640,7 +724,9 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
       );
     }
 
-    if (layout.type === "wizard") {
+    // Lanjut/Kembali hanya saat wizard benar-benar memandu — lihat `wizardNav`.
+    // Di `edit`, footer jatuh ke bentuk baku: satu tombol Simpan.
+    if (wizardNav) {
       return (
         <PageFooter spread>
           <Button kind="secondary" size="sm" onClick={onBack} disabled={saving}>
@@ -657,7 +743,13 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
                 kind="primary"
                 size="sm"
                 onClick={handleSave}
-                disabled={saving || (mode === "edit" && !isDirty)}
+                // Nol penjaga `isDirty` di sini: blok ini kini hanya terjangkau
+                // saat `create` (lihat `wizardNav`), dan form baru yang belum
+                // disentuh memang belum "kotor" — memakai penjaga edit di sini
+                // akan mematikan tombol Simpan pada satu-satunya mode yang
+                // masih memakainya. tsc menandainya sebagai perbandingan yang
+                // tak mungkin benar; ia benar.
+                disabled={saving}
               >
                 {saving ? labels.saving : submitLabel}
               </Button>

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/vitest.setup.ts

@@ -0,0 +1,22 @@
+// Tambalan lingkungan jsdom — BUKAN tambalan produk.
+//
+// jsdom nol mengimplementasikan `Element.prototype.scrollIntoView`. Carbon
+// `ComposedModal` memanggilnya saat memindahkan fokus, jadi setiap uji yang
+// membuka modal melempar `TypeError` di luar rantai promise uji. Vitest
+// menghitungnya sebagai *unhandled error*, bukan sebagai uji gagal — hasilnya
+// `Tests 108 passed` berdampingan dengan `Errors 11` dan **exit code 1**.
+//
+// 🔑 Itu bentuk kegagalan yang paling mudah dilaporkan keliru: ringkasan yang
+// dibaca manusia berbunyi hijau sepenuhnya, sementara gerbang CI yang membaca
+// exit code menolak paket ini. Sesi yang menambahkan tambalan ini sempat
+// melaporkan "105/105 lulus" atas suite yang MERAH, dan baru tahu setelah
+// verifikasi adversarial memeriksa exit code-nya secara terpisah.
+//
+// Fungsinya no-op: yang diuji adalah apa yang terender, bukan apakah browser
+// menggulir. Menambal di lapisan lingkungan menjaga kode produk tetap bersih
+// dari pengetahuan tentang jsdom.
+if (typeof Element !== "undefined" && !Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = function scrollIntoView() {
+    /* no-op: jsdom nol punya viewport untuk digulir */
+  };
+}