ppij-design-system 0.0.0-stage → 0.2.0

package/dist/components/editable-panel.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPencil } from "@tabler/icons-react";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Card } from "./card";
+/**
+ * The standard editable surface of the portal: a read-first panel.
+ * The panel only ever reads: title, one behaviour line, committed
+ * values as text, and an Edit action. Editing itself happens in
+ * the AdminDrawer (a right drawer on desktop, a bottom sheet on
+ * the phone), one panel at a time; the page owns the drawer.
+ * Reviewed changes leave a proposal block inside the panel with a
+ * Menunggu badge while the current values stay in effect. This is
+ * the profile pattern; every editable surface follows it.
+ */
+export function EditablePanel({ title, description, pending = false, pendingLabel = "Menunggu", onEdit, editLabel = "Edit", proposal, children }) {
+    return (_jsxs(Card, { className: "gap-0 rounded-xl border border-brand-border bg-card py-0", children: [_jsxs("div", { className: "flex flex-row items-start justify-between gap-3 px-5 pt-5 pb-4", children: [_jsxs("div", { className: "grid min-w-0 gap-1.5", children: [_jsx("h2", { className: "text-base leading-6 font-bold text-brand-ink", children: title }), description ? _jsx("p", { className: "text-sm leading-5 text-brand-muted", children: description }) : null] }), pending ? _jsx(Badge, { variant: "outline", className: "shrink-0", children: pendingLabel }) : null] }), _jsxs("div", { className: "grid gap-4 px-5 pb-5", children: [children, proposal, _jsx("div", { className: "flex justify-end border-t border-brand-border pt-4", children: _jsxs(Button, { type: "button", variant: "outline", onClick: onEdit, children: [_jsx(IconPencil, { "aria-hidden": "true" }), editLabel] }) })] })] }));
+}

package/dist/components/empty.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React.JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };

package/dist/components/empty.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+function Empty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-brand-border bg-card p-10 text-center text-balance", className), ...props }));
+}
+function EmptyHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className), ...props }));
+}
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-transparent [&_svg]:size-10 [&_svg]:text-brand-muted",
+            icon: "flex size-12 rounded-full bg-secondary text-brand-ink [&_svg]:size-6",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
+}
+function EmptyTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-title", className: cn("text-base font-semibold tracking-tight text-brand-ink", className), ...props }));
+}
+function EmptyDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "empty-description", className: cn("text-sm text-brand-muted [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function EmptyContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-content", className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-3 text-sm text-balance", className), ...props }));
+}
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };

package/dist/components/file-upload.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type FileUploadStatus = "empty" | "uploading" | "done" | "error";
+export interface FileUploadProps {
+    /** Field label, for example "Foto kartu anggota". */
+    label: string;
+    /** One quiet line of guidance: accepted formats and maximum size. */
+    hint?: string;
+    accept?: string;
+    status: FileUploadStatus;
+    /** Name of the chosen file, shown in the done and error states. */
+    fileName?: string;
+    /** Upload progress from 0 to 100, shown in the uploading state. */
+    progress?: number;
+    /** Error message shown in the error state. */
+    errorText?: string;
+    /** Called with the file the person picked. */
+    onPick: (file: File) => void;
+    /** Called when the person removes the chosen file. */
+    onRemove?: () => void;
+    className?: string;
+}
+/**
+ * One file field with its states designed: empty dropzone, uploading
+ * with progress, done with the file name and a remove action, error
+ * with the reason. The page owns the actual upload; this component
+ * renders whichever state the page reports.
+ */
+export declare function FileUpload({ label, hint, accept, status, fileName, progress, errorText, onPick, onRemove, className }: FileUploadProps): React.JSX.Element;

package/dist/components/file-upload.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconUpload, IconX, IconFileCheck, IconLoader2, IconAlertTriangle } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+/**
+ * One file field with its states designed: empty dropzone, uploading
+ * with progress, done with the file name and a remove action, error
+ * with the reason. The page owns the actual upload; this component
+ * renders whichever state the page reports.
+ */
+export function FileUpload({ label, hint, accept, status, fileName, progress = 0, errorText, onPick, onRemove, className }) {
+    const inputRef = React.useRef(null);
+    const openPicker = () => inputRef.current?.click();
+    return (_jsxs("div", { className: cn("grid gap-2", className), children: [_jsx("span", { className: "text-sm font-medium", children: label }), _jsx("input", { ref: inputRef, type: "file", accept: accept, className: "hidden", onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    if (file)
+                        onPick(file);
+                    event.target.value = "";
+                } }), status === "empty" && (_jsxs("button", { type: "button", onClick: openPicker, className: "grid justify-items-center gap-2 rounded-lg border border-dashed border-input bg-card px-4 py-6 text-center outline-none transition-colors hover:border-brand-red/50 focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-secondary text-muted-foreground", children: _jsx(IconUpload, { className: "size-5" }) }), _jsx("span", { className: "text-sm font-medium text-brand-ink", children: "Pilih berkas atau jatuhkan di sini" }), hint && _jsx("span", { className: "text-xs text-muted-foreground", children: hint })] })), status === "uploading" && (_jsxs("div", { className: "grid gap-2 rounded-lg border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(IconLoader2, { className: "size-4 animate-spin text-muted-foreground" }), _jsx("span", { className: "font-medium", children: fileName }), _jsxs("span", { className: "ml-auto text-muted-foreground", children: [progress, "%"] })] }), _jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-secondary", children: _jsx("div", { className: "h-full rounded-full bg-brand-red transition-all", style: { width: progress + "%" } }) })] })), status === "done" && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border bg-card px-4 py-3", children: [_jsx("span", { className: "flex size-9 items-center justify-center rounded-md bg-success/10 text-success", children: _jsx(IconFileCheck, { className: "size-5" }) }), _jsxs("div", { className: "grid min-w-0", children: [_jsx("span", { className: "truncate text-sm font-medium", children: fileName }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Terunggah" })] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "ml-auto", onClick: onRemove, "aria-label": "Hapus berkas", children: _jsx(IconX, {}) }))] })), status === "error" && (_jsx("div", { className: "grid gap-2", children: _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-destructive/40 bg-card px-4 py-3", children: [_jsx("span", { className: "flex size-9 items-center justify-center rounded-md bg-destructive/10 text-destructive", children: _jsx(IconAlertTriangle, { className: "size-5" }) }), _jsxs("div", { className: "grid min-w-0", children: [_jsx("span", { className: "truncate text-sm font-medium", children: fileName }), _jsx("span", { className: "text-xs text-destructive", children: errorText ?? "Unggahan gagal. Coba lagi." })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "ml-auto", onClick: openPicker, children: "Coba lagi" })] }) }))] }));
+}

package/dist/components/form-panel.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+type FormPanelProps = {
+    title: string;
+    description?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    /**
+     * Element for the panel title. "div" (default) keeps step pages to their single h1; review
+     * screens pass "h2" so each section is a navigable heading.
+     */
+    titleAs?: "div" | "h2";
+};
+export declare function FormPanel({ title, description, children, footer, className, titleAs }: FormPanelProps): React.JSX.Element;
+export {};

package/dist/components/form-panel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+export function FormPanel({ title, description, children, footer, className, titleAs = "div" }) {
+    const titleNode = titleAs === "h2"
+        ? _jsx(CardTitle, { children: _jsx("h2", { className: "text-base leading-snug font-semibold", children: title }) })
+        : _jsx(CardTitle, { children: title });
+    return (_jsxs(Card, { className: cn("bg-card py-4 shadow-none sm:py-6", className), children: [_jsxs(CardHeader, { className: "px-4 sm:px-6", children: [titleNode, description ? _jsx(CardDescription, { children: description }) : null] }), _jsx(CardContent, { className: "px-4 sm:px-6", children: children }), footer ? _jsx(CardFooter, { className: "px-4 sm:px-6", children: footer }) : null] }));
+}

package/dist/components/funding-picker.d.ts

@@ -0,0 +1,20 @@
+export interface FundingPickerProps {
+    /** Picked funding sources, as display labels. */
+    values: string[];
+    onChange: (values: string[]) => void;
+    /** Catalogue entries offered as one-tap suggestions; the lookup stays in the application. */
+    options: string[];
+    /** The wizard caps funding at 3 sources (MAX_FUNDING). */
+    max?: number;
+    placeholder?: string;
+    maxMessage?: string;
+    className?: string;
+}
+/**
+ * Funding source picker, extracted from the wizard FundingPicker:
+ * the minat-style multi-pick (chips in the field, catalogue
+ * suggestions under it, custom entries allowed) with the funding
+ * cap applied. The catalogue itself arrives as props; searching
+ * and suggesting new sources stay in the application.
+ */
+export declare function FundingPicker({ values, onChange, options, max, placeholder, maxMessage, className, }: FundingPickerProps): import("react").JSX.Element;

package/dist/components/funding-picker.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TagInput } from "./tag-input";
+/**
+ * Funding source picker, extracted from the wizard FundingPicker:
+ * the minat-style multi-pick (chips in the field, catalogue
+ * suggestions under it, custom entries allowed) with the funding
+ * cap applied. The catalogue itself arrives as props; searching
+ * and suggesting new sources stay in the application.
+ */
+export function FundingPicker({ values, onChange, options, max = 3, placeholder = "Cari atau ketik sumber pendanaan", maxMessage, className, }) {
+    const reachedMax = values.length >= max;
+    return (_jsxs("div", { className: className, children: [_jsx(TagInput, { values: values, onChange: (next) => {
+                    if (next.length <= max)
+                        onChange(next);
+                }, suggestions: reachedMax ? [] : options.filter((option) => !values.includes(option)), placeholder: reachedMax ? "" : placeholder }), reachedMax && (_jsx("p", { role: "status", className: "mt-2 text-sm text-brand-muted", children: maxMessage ?? `Maksimal ${max} sumber pendanaan.` }))] }));
+}

package/dist/components/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };

package/dist/components/input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-9 w-full min-w-0 data-[size=sm]:h-8 data-[size=lg]:h-11 rounded-md border border-input bg-card px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Input };

package/dist/components/invitation-card.d.ts

@@ -0,0 +1,14 @@
+export interface InvitationCardProps {
+    heading: string;
+    body: string;
+    actionLabel: string;
+    href: string;
+}
+/**
+ * The Beranda role-invitation card, extracted exactly from
+ * ppij-identity-sso Beranda.tsx (the me.invitation element): spans
+ * both columns, heading, one body line (the app composes it from
+ * role, unit, and the invitation end date), and an outline action.
+ * Real copy: heading "Undangan peran", action "Lihat undangan".
+ */
+export declare function InvitationCard({ heading, body, actionLabel, href }: InvitationCardProps): import("react").JSX.Element;

package/dist/components/invitation-card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./button";
+import { Card } from "./card";
+/**
+ * The Beranda role-invitation card, extracted exactly from
+ * ppij-identity-sso Beranda.tsx (the me.invitation element): spans
+ * both columns, heading, one body line (the app composes it from
+ * role, unit, and the invitation end date), and an outline action.
+ * Real copy: heading "Undangan peran", action "Lihat undangan".
+ */
+export function InvitationCard({ heading, body, actionLabel, href }) {
+    return (_jsxs(Card, { className: "gap-3 rounded-xl border border-brand-border bg-card py-5 md:col-span-2", children: [_jsxs("div", { className: "px-5", children: [_jsx("h2", { className: "font-bold text-brand-ink", children: heading }), _jsx("p", { className: "mt-1 text-sm text-brand-muted", children: body })] }), _jsx("div", { className: "px-5", children: _jsx(Button, { asChild: true, variant: "outline", className: "min-h-11 px-5", children: _jsx("a", { href: href, children: actionLabel }) }) })] }));
+}

package/dist/components/label.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+export { Label };

package/dist/components/label.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Label as LabelPrimitive } from "radix-ui";
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+}
+export { Label };

package/dist/components/member-card-block.d.ts

@@ -0,0 +1,47 @@
+import "./member-card.css";
+/**
+ * The member card block, ported exactly from ppij-identity-sso
+ * portal/MemberCard.tsx (design in member-card.css, themes in
+ * ../card-themes.ts). Adaptations for the design system are seams
+ * only: membership fields arrive as flat props, the card logo and
+ * back map are src props, copy comes from the locale label maps
+ * below (the app's i18n strings, verbatim), and theme persistence
+ * goes through the CardThemePreference seam (an in-memory store by
+ * default; the app passes its preference API).
+ */
+export type MemberCardState = "active" | "expiring" | "change_pending" | "expired_grace" | "expired" | "suspended";
+/** Where the theme choice persists. Production uses the member preference API; the harness substitutes a simulated store. */
+export interface CardThemePreference {
+    read: (memberId: string) => Promise<string | null>;
+    save: (memberId: string, id: string | null) => Promise<void>;
+}
+export interface MemberCardBlockProps {
+    locale: "id" | "en";
+    /** Used only as the card theme preference key; never rendered on the card. */
+    memberId: string;
+    /** Defaults to an in-memory store. The app passes its member preference API. */
+    themePreference?: CardThemePreference;
+    /** Full name. The card shows it clamped to two lines; assistive technology gets the whole text. */
+    name: string;
+    /** Membership number, printed on both faces and encoded in the barcode. */
+    number: string;
+    /** Komsat display name (may carry the "Komsat " prefix; the card strips it). Null for korda-only members. */
+    komsat?: string | null;
+    /** Korda display name, e.g. "PPI Kansai". Also seeds the automatic theme. */
+    korda: string;
+    validUntil?: string | null;
+    graceUntil?: string | null;
+    suspendReason?: string | null;
+    state: MemberCardState;
+    /** The PPIJ logo shown on the front (the app serves /ppij-logo.png). */
+    logoSrc: string;
+    /** The decorative Indonesia map on the back (the app serves /id-map.svg). */
+    mapSrc: string;
+}
+/** Only the states with a valid membership show the barcode. */
+export declare const hasBarcode: (state: MemberCardState) => state is "active" | "expiring" | "change_pending";
+/**
+ * The member card with its actions. "Barcode" and the tap on the card share one flip state.
+ * Buttons appear only while a barcode is available (ACTIVE, expiring, change pending).
+ */
+export declare function MemberCardBlock(props: MemberCardBlockProps): import("react").JSX.Element;

package/dist/components/member-card-block.js

@@ -0,0 +1,329 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useEffect, useRef, useState } from "react";
+import Tilt from "react-parallax-tilt";
+import Barcode from "react-barcode";
+import { IconCheck } from "@tabler/icons-react";
+import { AdminDrawer } from "./admin-drawer";
+import { SavingIndicator } from "./saving-indicator";
+import { cardThemes, resolveCardTheme } from "../card-themes";
+import "./member-card.css";
+const memoryStore = new Map();
+/** Module-level singleton: the load effect keys on this object, so a fresh instance per render would refetch forever. */
+const memoryCardThemePreference = {
+    read: (memberId) => Promise.resolve(memoryStore.get(memberId) ?? null),
+    save: (memberId, id) => {
+        memoryStore.set(memberId, id);
+        return Promise.resolve();
+    },
+};
+const LABELS = {
+    id: {
+        brand: "PPI Jepang",
+        chip: "Aktif",
+        chipExpiring: "Berakhir {date}",
+        chipGrace: "Masa tenggang",
+        chipExpired: "Kedaluwarsa",
+        chipSuspended: "Ditangguhkan",
+        pending: "Perubahan menunggu persetujuan",
+        flipToBack: "Balik kartu untuk menampilkan barcode",
+        flipToFront: "Kembali ke depan kartu",
+        barcode: "Barcode",
+        download: "Unduh",
+        downloading: "Menyiapkan...",
+        downloadDone: "Kartu disimpan sebagai gambar.",
+        downloadFailed: "Kartu belum bisa disimpan. Coba lagi.",
+        changeTheme: "Ubah tema",
+        themeTitle: "Ubah tema kartu",
+        themeHint: "Pilih tampilan yang Anda suka. Tersimpan di akun Anda dan berlaku di semua perangkat. Tema tidak mengubah keanggotaan Anda.",
+        themeSaveError: "Gagal menyimpan. Pilihan bertahan untuk sesi ini; pilih lagi untuk mencoba ulang.",
+        theme: "Tema kartu",
+        themeAuto: "Otomatis · sesuai korda",
+        themeAutoShort: "Otomatis",
+        themeGroup: { korda: "Korda Jepang", ppij: "PPI Jepang", seasons: "Empat musim Jepang", nusantara: "Nusantara" },
+        motto: "Membuka Dunia untuk Indonesia dan Membuka Indonesia untuk Dunia",
+        barcodeHint: "Tunjukkan ke pengurus untuk dipindai",
+        graceBack: "Masa tenggang sampai {date}. Perpanjang untuk memakai barcode.",
+        expiredBack: "Keanggotaan telah berakhir. Perpanjang untuk memakai barcode.",
+        suspendedBack: "Barcode dinonaktifkan selama keanggotaan ditangguhkan.",
+        unitLabel: "Unit",
+        validLabel: "Berlaku s.d.",
+        endedLabel: "Berakhir",
+    },
+    en: {
+        brand: "PPI Japan",
+        chip: "Active",
+        chipExpiring: "Ends {date}",
+        chipGrace: "Grace period",
+        chipExpired: "Expired",
+        chipSuspended: "Suspended",
+        pending: "Change awaiting approval",
+        flipToBack: "Flip the card to show the barcode",
+        flipToFront: "Flip the card back to the front",
+        barcode: "Barcode",
+        download: "Download",
+        downloading: "Preparing...",
+        downloadDone: "Card saved as an image.",
+        downloadFailed: "The card could not be saved. Try again.",
+        changeTheme: "Change theme",
+        themeTitle: "Change card theme",
+        themeHint: "Choose a look you like. Saved to your account and used on every device. Themes do not change your membership.",
+        themeSaveError: "Saving failed. Your choice stays for this session; pick again to retry.",
+        theme: "Card theme",
+        themeAuto: "Automatic · your korda",
+        themeAutoShort: "Automatic",
+        themeGroup: { korda: "Japan regions", ppij: "PPI Japan", seasons: "Four seasons in Japan", nusantara: "Nusantara" },
+        motto: "Membuka Dunia untuk Indonesia dan Membuka Indonesia untuk Dunia",
+        barcodeHint: "Show this to pengurus to scan",
+        graceBack: "Grace period until {date}. Renew to use the barcode.",
+        expiredBack: "Membership has ended. Renew to use the barcode.",
+        suspendedBack: "The barcode is off while the membership is suspended.",
+        unitLabel: "Unit",
+        validLabel: "Valid to",
+        endedLabel: "Ended",
+    },
+};
+const MAX_X = 10;
+const MAX_Y = 14;
+const CARD_WIDTH = 350;
+/** The download sheet is 398 px wide (CSS) and is captured at 3x. */
+const SHEET_PIXEL_RATIO = 3;
+const CARD_CLASS = {
+    active: "mc-active",
+    expiring: "mc-expiring",
+    change_pending: "mc-active",
+    expired_grace: "mc-grace",
+    expired: "mc-expired",
+    suspended: "mc-suspended",
+};
+/** Only the states with a valid membership show the barcode. */
+export const hasBarcode = (state) => state === "active" || state === "expiring" || state === "change_pending";
+const INTL_LOCALE = { id: "id-ID", en: "en-GB" };
+/** Day and short month, e.g. "31 Mar" (chip). Year added for the validity line, e.g. "31 Mar 2027". */
+function shortDate(value, locale, withYear) {
+    if (!value)
+        return "-";
+    const date = new Date(`${value}T00:00:00+09:00`);
+    if (Number.isNaN(date.getTime()))
+        return "-";
+    return new Intl.DateTimeFormat(INTL_LOCALE[locale], {
+        timeZone: "Asia/Tokyo",
+        day: "numeric",
+        month: "short",
+        ...(withYear ? { year: "numeric" } : {}),
+    }).format(date);
+}
+/** Unit line: "Sendai · PPI Kanto". The stored unit names carry type prefixes ("Komsat Sendai");
+ * the card shows the real names without them. A korda member without komsat shows just the korda. */
+function unitLine(p) {
+    const komsat = p.komsat?.replace(/^Komsat\s+/, "") ?? "";
+    return p.komsat ? `${komsat} · ${p.korda}` : p.korda;
+}
+function chipText(state, p, l) {
+    switch (state) {
+        case "active":
+        case "change_pending":
+            return l.chip;
+        case "expiring":
+            return l.chipExpiring.replace("{date}", shortDate(p.validUntil, p.locale, false));
+        case "expired_grace":
+            return l.chipGrace;
+        case "expired":
+            return l.chipExpired;
+        case "suspended":
+            return l.chipSuspended;
+    }
+}
+function backNote(state, p, l) {
+    switch (state) {
+        case "expired_grace":
+            return l.graceBack.replace("{date}", shortDate(p.graceUntil, p.locale, true));
+        case "expired":
+            return l.expiredBack;
+        case "suspended":
+            return l.suspendedBack;
+        default:
+            return "";
+    }
+}
+/** Front face: logo, chip, name, number, unit line and validity. */
+function Front(p) {
+    const l = LABELS[p.locale];
+    const state = p.state;
+    const ended = state === "expired" || state === "expired_grace";
+    return (_jsxs("div", { className: `mc-face mc-front ${CARD_CLASS[state]}`, "data-theme": p.theme?.id, style: { "--mc-base": p.theme?.base }, children: [p.theme && !p.artworkFailed ? (_jsx("svg", { className: "mc-art", viewBox: p.theme.viewBox, preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", focusable: "false", children: _jsx("image", { href: p.theme.asset, width: p.theme.width, height: p.theme.height, onError: p.onArtworkError }) })) : null, _jsx("div", { className: "mc-shine", "aria-hidden": "true", style: p.shineStyle }), _jsxs("div", { className: "mc-row", children: [_jsx("img", { className: "mc-logo", src: p.logoSrc, alt: l.brand, width: 92, height: 63 }), _jsx("span", { className: "mc-chip", children: chipText(state, p, l) })] }), _jsxs("div", { className: "mc-id", children: [_jsx("span", { className: "mc-name", children: p.name }), state === "suspended" ? (_jsx("span", { className: "mc-note", children: p.suspendReason ?? "" })) : (_jsx("span", { className: "mc-number", children: p.number })), state === "change_pending" ? _jsx("span", { className: "mc-note", children: l.pending }) : null] }), _jsxs("div", { className: "mc-row mc-foot", children: [_jsxs("div", { className: "mc-col", children: [_jsx("span", { className: "mc-label", children: l.unitLabel }), _jsx("span", { className: "mc-val", children: unitLine(p) })] }), state !== "suspended" && p.validUntil ? (_jsxs("div", { className: "mc-col mc-right", children: [_jsx("span", { className: "mc-label", children: ended ? l.endedLabel : l.validLabel }), _jsx("span", { className: "mc-val", children: shortDate(p.validUntil, p.locale, true) })] })) : null] })] }));
+}
+/** Back face: motto, barcode of the membership number, printed number, hint and decorative map. */
+function Back(p) {
+    const l = LABELS[p.locale];
+    const state = p.state;
+    return (_jsxs("div", { className: `mc-face mc-back ${CARD_CLASS[state]}`, children: [_jsx("div", { className: "mc-shine", "aria-hidden": "true", style: p.shineStyle }), state !== "suspended" ? _jsx("img", { className: "mc-map", src: p.mapSrc, alt: "", "aria-hidden": "true" }) : null, _jsx("div", { className: "mc-stripe", children: _jsx("span", { children: l.motto }) }), _jsx("div", { className: "mc-codewrap", children: hasBarcode(state) ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mc-quiet", children: _jsx(Barcode, { value: p.number, format: "CODE128", width: 1.25, height: 58, displayValue: false, margin: 0, background: "#ffffff", lineColor: "#000000" }) }), _jsx("span", { className: "mc-number mc-small", children: p.number }), _jsx("span", { className: "mc-hint", children: l.barcodeHint })] })) : (_jsx("span", { className: "mc-hint mc-backnote", children: backNote(state, p, l) })) })] }));
+}
+/**
+ * Phone tilt follows the change in orientation from the pose the phone is held in. Android and desktop
+ * browsers deliver the events with no prompt; iOS needs a prompt, so it is skipped by user agent and the
+ * touch-drag tilt of the library is the fallback. The permission API is never called.
+ */
+const isIOS = () => typeof navigator !== "undefined" &&
+    (/iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1));
+const sensorWithoutPrompt = () => typeof window !== "undefined" && "DeviceOrientationEvent" in window && !isIOS();
+const clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
+const reduceMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** The tilting, flipping card. One button: click, tap, Enter and Space flip it. */
+function MemberCardFace(props) {
+    const { name, flipped, onFlip } = props;
+    const l = LABELS[props.locale];
+    const still = reduceMotion();
+    const [shine, setShine] = useState({ x: 25, y: 15 });
+    const [gyro, setGyro] = useState(null);
+    const frame = useRef(0);
+    const fitRef = useRef(null);
+    const [scale, setScale] = useState(1);
+    // The card is drawn at 350 px and scaled as a whole on narrow screens, so nothing reflows.
+    useLayoutEffect(() => {
+        const el = fitRef.current;
+        if (!el)
+            return;
+        const fit = () => setScale(Math.min(1, el.clientWidth / CARD_WIDTH));
+        fit();
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    useEffect(() => {
+        if (still || !sensorWithoutPrompt())
+            return;
+        let base = null;
+        const onOrient = (e) => {
+            if (e.beta == null || e.gamma == null)
+                return;
+            base ??= { b: e.beta, g: e.gamma };
+            base.b += (e.beta - base.b) * 0.03;
+            base.g += (e.gamma - base.g) * 0.03;
+            const x = clamp(-(e.beta - base.b) * 0.6, -MAX_X, MAX_X);
+            const y = clamp((e.gamma - base.g) * 0.6, -MAX_Y, MAX_Y);
+            cancelAnimationFrame(frame.current);
+            frame.current = requestAnimationFrame(() => {
+                setGyro({ x, y });
+                setShine({ x: Math.round(50 + (y / MAX_Y) * 45), y: Math.round(50 - (x / MAX_X) * 45) });
+            });
+        };
+        window.addEventListener("deviceorientation", onOrient);
+        return () => {
+            window.removeEventListener("deviceorientation", onOrient);
+            cancelAnimationFrame(frame.current);
+        };
+    }, [still]);
+    // Each face carries its own shine so it turns with the card (the library's glare layer does not).
+    const shineStyle = still
+        ? undefined
+        : {
+            background: `radial-gradient(circle at ${shine.x}% ${shine.y}%, rgba(255,255,255,0.5), rgba(255,255,255,0) 40%), radial-gradient(circle at ${100 - shine.x}% ${100 - shine.y}%, rgba(120,128,138,0.08), rgba(120,128,138,0) 60%)`,
+        };
+    const flipLabel = flipped ? l.flipToFront : l.flipToBack;
+    return (_jsx("div", { ref: fitRef, className: "mc-fit", style: { height: (221 + 28) * scale }, children: _jsxs("button", { type: "button", className: "mc-hit", style: { transform: `scale(${scale})`, transformOrigin: "top left" }, "aria-pressed": flipped, onClick: () => onFlip(!flipped), onPointerMove: (e) => {
+                if (still)
+                    return;
+                const r = e.currentTarget.getBoundingClientRect();
+                setShine({
+                    x: Math.round(((e.clientX - r.left) / r.width) * 100),
+                    y: Math.round(((e.clientY - r.top) / r.height) * 100),
+                });
+            }, onPointerLeave: () => setShine({ x: 25, y: 15 }), children: [_jsx("span", { className: "mc-sr-only", children: `${name}. ${flipLabel}` }), _jsx(Tilt, { className: "mc-tilt", tiltEnable: !still, tiltMaxAngleX: MAX_X, tiltMaxAngleY: MAX_Y, perspective: 900, glareEnable: false, gyroscope: false, tiltAngleXManual: gyro ? gyro.x : null, tiltAngleYManual: gyro ? gyro.y : null, scale: 1.02, children: _jsxs("div", { className: `mc-flip${flipped ? " is-flipped" : ""}`, children: [_jsx("div", { className: "mc-face-wrap mc-front-wrap", inert: flipped, "aria-hidden": flipped, children: _jsx(Front, { ...props, shineStyle: shineStyle }) }), _jsx("div", { className: "mc-face-wrap mc-back-wrap", inert: !flipped, "aria-hidden": !flipped, children: _jsx(Back, { ...props, shineStyle: shineStyle }) })] }) })] }) }));
+}
+/**
+ * The member card with its actions. "Barcode" and the tap on the card share one flip state.
+ * Buttons appear only while a barcode is available (ACTIVE, expiring, change pending).
+ */
+export function MemberCardBlock(props) {
+    return _jsx(MemberCardContent, { ...props }, props.memberId);
+}
+/** One selectable theme preview: the real clipped artwork on its base, with a labelled selected state. */
+function ThemeTile({ locale, theme, selected, onPick }) {
+    const l = LABELS[locale];
+    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": selected, "data-theme-id": theme?.id ?? null, onClick: onPick, className: `mc-tile${selected ? " mc-tile-on" : ""}`, children: [theme ? (_jsx("span", { className: "mc-thumb", style: { background: theme.base }, "aria-hidden": "true", children: _jsx("svg", { viewBox: theme.viewBox, preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", focusable: "false", children: _jsx("image", { href: theme.asset, width: theme.width, height: theme.height }) }) })) : (_jsx("span", { className: "mc-thumb mc-thumb-auto", "aria-hidden": "true", children: l.themeAutoShort })), _jsx("span", { className: "mc-tile-label", children: theme ? (locale === "id" ? theme.labelId : theme.labelEn) : l.themeAuto }), selected ? _jsx(IconCheck, { className: "mc-tile-check", "aria-hidden": "true" }) : null] }));
+}
+function MemberCardContent(props) {
+    const { locale, state, memberId } = props;
+    const l = LABELS[locale];
+    // Server preference: korda default renders immediately, the saved choice applies when the
+    // read resolves, and saving shows the shared autosave indicator. A failed save keeps the
+    // in-session choice with a recoverable error.
+    const [pref, setPref] = useState({ value: null, loaded: false });
+    const [saveState, setSaveState] = useState("idle");
+    const preference = props.themePreference ?? memoryCardThemePreference;
+    useEffect(() => {
+        let alive = true;
+        preference.read(memberId)
+            .then((value) => { if (alive)
+            setPref({ value, loaded: true }); })
+            .catch(() => { if (alive)
+            setPref((old) => ({ ...old, loaded: true })); });
+        return () => { alive = false; };
+    }, [memberId, preference]);
+    const selected = pref.loaded ? pref.value : null;
+    const [themeOpen, setThemeOpen] = useState(false);
+    const pickTheme = (id) => {
+        setPref({ value: id, loaded: true });
+        setSaveState("saving");
+        preference.save(memberId, id)
+            .then(() => setSaveState("saved"))
+            .catch(() => setSaveState("error"));
+    };
+    const theme = resolveCardTheme(props.korda, selected);
+    const [failedTheme, setFailedTheme] = useState(null);
+    const artworkFailed = failedTheme === theme.id;
+    const faceProps = { ...props, theme, artworkFailed, onArtworkError: () => setFailedTheme(theme.id) };
+    const [flipped, setFlipped] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [msg, setMsg] = useState(null);
+    const sheet = useRef(null);
+    async function download() {
+        if (!sheet.current || busy)
+            return;
+        setBusy(true);
+        setMsg(null);
+        try {
+            // Preload the selected artwork before cloning either face. A failed image becomes a plain card.
+            if (!artworkFailed) {
+                const loaded = await new Promise((resolve) => {
+                    const img = new Image();
+                    const timer = window.setTimeout(() => finish(false), 5000);
+                    function finish(ok) { window.clearTimeout(timer); img.onload = null; img.onerror = null; resolve(ok); }
+                    img.onload = () => finish(true);
+                    img.onerror = () => finish(false);
+                    img.src = theme.asset;
+                });
+                if (!loaded) {
+                    setFailedTheme(theme.id);
+                    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+                }
+            }
+            // Loaded on the first tap only, so the library is not part of the first load of Beranda.
+            const { toBlob } = await import("html-to-image");
+            const blob = await toBlob(sheet.current, {
+                pixelRatio: SHEET_PIXEL_RATIO,
+                cacheBust: true,
+                imagePlaceholder: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"/>')}`,
+                backgroundColor: "#f6f6f4",
+            });
+            if (!blob)
+                throw new Error("empty image");
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = "kartu-anggota-ppij.png";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            setTimeout(() => URL.revokeObjectURL(url), 10_000);
+            setMsg({ ok: true, text: l.downloadDone });
+        }
+        catch {
+            setMsg({ ok: false, text: l.downloadFailed });
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "mc-block", "data-card-state": state, children: [_jsx(MemberCardFace, { ...faceProps, flipped: flipped, onFlip: setFlipped }), hasBarcode(state) ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mc-actions", children: [_jsx("button", { type: "button", className: "mc-btn mc-btn-primary", "aria-pressed": flipped, onClick: () => setFlipped(!flipped), children: l.barcode }), _jsx("button", { type: "button", className: "mc-btn", disabled: busy, onClick: download, children: busy ? l.downloading : l.download }), _jsx("button", { type: "button", className: "mc-btn", "aria-haspopup": "dialog", "aria-expanded": themeOpen, onClick: () => setThemeOpen(true), children: l.changeTheme })] }), _jsx("p", { className: `mc-msg${msg && !msg.ok ? " mc-msg-err" : ""}`, role: "status", "aria-live": "polite", children: msg?.text }), _jsx("div", { className: "mc-sheet-wrap", "aria-hidden": "true", children: _jsxs("div", { className: "mc-sheet", ref: sheet, children: [_jsx(Front, { ...faceProps }), _jsx(Back, { ...faceProps })] }) })] })) : null, _jsxs(AdminDrawer, { open: themeOpen, onOpenChange: setThemeOpen, locale: locale, title: l.themeTitle, description: l.themeHint, children: [_jsx("div", { className: "mb-3 flex justify-end", children: _jsx(SavingIndicator, { status: saveState, locale: locale, errorText: l.themeSaveError }) }), _jsxs("div", { role: "radiogroup", "aria-label": l.theme, className: "mc-theme-grid", children: [_jsx(ThemeTile, { locale: locale, theme: null, selected: selected === null, onPick: () => pickTheme(null) }), ["korda", "ppij", "seasons", "nusantara"].map((group) => (_jsxs("div", { className: "mc-theme-group", children: [_jsx("h3", { children: l.themeGroup[group] }), _jsx("div", { className: "mc-theme-tiles", children: cardThemes.filter((item) => item.group === group).map((item) => (_jsx(ThemeTile, { locale: locale, theme: item, selected: selected === item.id, onPick: () => pickTheme(item.id) }, item.id))) })] }, group)))] })] })] }));
+}