@utopia-studio-design/design-system-cli 0.8.1 → 0.8.3

package/data/ui-parts/blocks/ux-pattern-examples/WorkflowExample.tsx

@@ -0,0 +1,1761 @@
+import { useEffect, useState } from "react";
+import {
+  Button,
+  TextInput,
+  TextArea,
+  NativeSelect,
+} from "@utopia-studio-design/design-system";
+import {
+  WorkflowFields,
+  RecordTable,
+  StepChecklist,
+  StatStrip,
+  RatingFields,
+  TrendSummary,
+  MediaStage,
+} from "../semantic-pattern-parts/WorkflowParts";
+import "../semantic-pattern-parts/product-parts.css";
+import { fieldsFor, workflowDefinitions, type WorkflowDefinition } from "./workflow-definitions";
+import { L, workflowCopy as copy, type Copy } from "./workflow-copy";
+import type { ExampleLocale } from "./copy";
+import "./ux-examples.css";
+
+export type WorkflowProps = { locale: ExampleLocale; initialState?: string };
+const text = (locale: ExampleLocale) => (value: Copy) => value[locale];
+const href = (id: string) => "#/templates/patterns/" + id;
+
+/** The composition owns fixture state only. Reuse the registered parts with host data in products. */
+export function WorkflowExample({
+  definition: d,
+  locale,
+  initialState = "default",
+}: WorkflowProps & { definition: WorkflowDefinition }) {
+  const t = text(locale);
+  return (
+    <div
+      className="ux-example product-example"
+      data-slot="workflow-example"
+      data-workflow={d.id}
+      dir={locale === "ar" ? "rtl" : "ltr"}
+    >
+      <div className="product-content">
+        <header>
+          <h3>{t(d.title)}</h3>
+          <p>{t(d.description)}</p>
+        </header>
+        {d.kind === "form" ? (
+          <FormFlow d={d} locale={locale} initialState={initialState} />
+        ) : d.kind === "table" ? (
+          <TableFlow d={d} locale={locale} initialState={initialState} />
+        ) : d.kind === "checklist" || d.kind === "progress" ? (
+          <ChecklistFlow d={d} locale={locale} initialState={initialState} />
+        ) : d.kind === "rating" ? (
+          <AssessmentFlow d={d} locale={locale} initialState={initialState} />
+        ) : d.kind === "allocation" ? (
+          <AllocationFlow locale={locale} initialState={initialState} />
+        ) : d.kind === "dashboard" ? (
+          <DashboardFlow d={d} locale={locale} initialState={initialState} />
+        ) : d.kind === "settings" ? (
+          <SettingsFlow locale={locale} initialState={initialState} />
+        ) : d.kind === "media" ? (
+          <MediaFlow d={d} locale={locale} initialState={initialState} />
+        ) : d.kind === "articles" ? (
+          <ContentFlow d={d} locale={locale} initialState={initialState} />
+        ) : (
+          <RecoveryFlow d={d} locale={locale} initialState={initialState} />
+        )}
+        {d.related?.length ? (
+          <nav
+            className="product-actions"
+            aria-label={t(L("Related examples", "연결된 예시", "أمثلة مرتبطة"))}
+          >
+            {d.related.map((id) => (
+              <a className="ux-catalog__link" href={href(id)} key={id}>
+              {t(workflowDefinitions.find(item => item.id === id)?.title ?? L(id, id, id))}
+              </a>
+            ))}
+          </nav>
+        ) : null}
+      </div>
+      <footer>{t(copy.demo)}</footer>
+    </div>
+  );
+}
+type FlowProps = WorkflowProps & { d: WorkflowDefinition };
+function Result({
+  locale,
+  message,
+  onReset,
+}: {
+  locale: ExampleLocale;
+  message?: string;
+  onReset: () => void;
+}) {
+  const t = text(locale);
+  return (
+    <section className="product-card" role="status">
+      <h4>{message || t(copy.done)}</h4>
+      <p>{t(copy.demo)}</p>
+      <Button variant="outline" onClick={onReset}>
+        {t(copy.reset)}
+      </Button>
+    </section>
+  );
+}
+
+function FormFlow({ d, locale, initialState = "default" }: FlowProps) {
+  const t = text(locale),
+    definitions = fieldsFor(d, initialState);
+  const [values, setValues] = useState<Record<string, string>>(initialState === 'specific' ? {mode: t(L('Choose a specific expert', '특정 전문가 선택', 'اختيار خبير محدد'))} : {}),
+    [errors, setErrors] = useState<Record<string, string>>(
+      initialState === "validation"
+        ? Object.fromEntries(
+            definitions
+              .filter((f) => f.required)
+              .map((f) => [f.id, t(copy.error)])
+          )
+        : {}
+    );
+  const [done, setDone] = useState(initialState === "success"),
+    [saved, setSaved] = useState(false);
+  const specific =
+    d.id === "booking-request-01" &&
+    (values.mode ===
+        t(
+          L("Choose a specific expert", "특정 전문가 선택", "اختيار خبير محدد")
+        ));
+  const fields = [
+    ...definitions,
+    ...(specific
+      ? [
+          {
+            id: "expert",
+            label: L("Expert", "전문가", "الخبير"),
+            type: "select" as const,
+            options: [
+              L("Alex Kim", "김아름", "أليكس كيم"),
+              L("Noor Ali", "누르 알리", "نور علي"),
+            ],
+            required: true,
+          },
+        ]
+      : []),
+  ];
+  const set = (id: string, value: string) => {
+    setValues((v) => {
+      // Tier changes update the dependent fixture fields in every locale.
+      const tier = fields.find(f => f.id === 'tier')?.options?.findIndex(option => t(option) === value) ?? -1
+      return {...v, [id]: value, ...(id === 'tier' && tier >= 0 ? {credits: String([100,250,600,0][tier]), fee: String([15000,15000,15000,0][tier])} : {})}
+    });
+    setErrors((e) => ({ ...e, [id]: "" }));
+    setSaved(false);
+  };
+  const validate = () => {
+    const next: Record<string, string> = {};
+    for (const f of fields) {
+      const v = values[f.id]?.trim() ?? "";
+      if (
+        (f.required && (!v || (f.type === "check" && v !== "true"))) ||
+        (v && f.minLength && v.length < f.minLength) ||
+        (v && f.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) ||
+        (v && f.type === "url" && !/^https?:\/\/[^\s]+$/.test(v)) ||
+        (v && f.type === 'select' && !f.options?.some(option => t(option) === v)) ||
+        (v && f.type === 'multi-select' && v.split('\n').some(value => !f.options?.some(option => t(option) === value))) ||
+        (v &&
+          f.type === "number" &&
+          (!Number.isFinite(Number(v)) ||
+            (f.min !== undefined && Number(v) < f.min) ||
+            (f.max !== undefined && Number(v) > f.max)))
+      )
+        next[f.id] = f.minLength
+          ? `${t(copy.error)} (${f.minLength}+)`
+          : t(copy.error);
+    }
+    setErrors(next);
+    return !Object.keys(next).length;
+  };
+  if (done)
+    return (
+      <Result
+        locale={locale}
+        onReset={() => {
+          setDone(false);
+          setValues({});
+          setErrors({});
+        }}
+      />
+    );
+  if (initialState === "no-credits")
+    return (
+      <section className="product-card" role="status">
+        <h4>
+          {t(
+            L(
+              "No available credits",
+              "사용 가능한 크레딧이 없어요",
+              "لا يوجد رصيد متاح"
+            )
+          )}
+        </h4>
+        <p>
+          {t(
+            L(
+              "Request an allocation before booking.",
+              "예약 전에 크레딧 배분을 요청하세요.",
+              "اطلب تخصيص رصيد قبل الحجز."
+            )
+          )}
+        </p>
+        <a href={href("credit-balance-01")}>
+          {t(L("View balance", "잔액 보기", "عرض الرصيد"))}
+        </a>
+      </section>
+    );
+  return (
+    <form
+      noValidate
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (validate()) setDone(true);
+      }}
+    >
+      <WorkflowFields
+        fields={fields.map((f) => ({
+          ...f,
+          label: t(f.label),
+          options: f.options?.map(t),
+        }))}
+        values={values}
+        errors={errors}
+        onChange={set}
+        onFile={(id, file) => {
+          const allowed = fields.find((f) => f.id === id)?.accept ?? "";
+          const extension = file?.name.split(".").pop()?.toLowerCase();
+          const validType =
+            file &&
+            ((allowed.includes(file.type) && Boolean(file.type)) ||
+              (["pdf", "png", "jpg", "jpeg"].includes(extension ?? "") &&
+                allowed.includes("." + extension)));
+          if (!file) {
+            set(id, "");
+            return;
+          }
+          if (file.size > 5 * 1024 * 1024 || !validType) {
+            setValues((v) => ({ ...v, [id]: "" }));
+            setErrors((e) => ({ ...e, [id]: t(copy.fileError) }));
+            return;
+          }
+          set(id, file.name); // Metadata only; no file bytes leave this tab.
+        }}
+      />
+      {["subscription-create-01", "plan-selection-01"].includes(d.id) ? (
+        <StatStrip
+          items={[
+            {
+              label: t(L("Example credits", "예시 크레딧", "رصيد المثال")),
+              value:
+                values.credits ||
+                '—',
+            },
+            {
+              label: t(L("Example access fee", "예시 이용료", "رسوم المثال")),
+              value: values.fee || "0",
+            },
+          ]}
+        />
+      ) : null}
+      {Object.values(errors).some(Boolean) ? (
+        <p role="alert">{t(copy.error)}</p>
+      ) : null}
+      {saved ? <p role="status">{t(copy.saved)}</p> : null}
+      <div className="product-actions">
+        <Button type="submit">{t(copy.submit)}</Button>
+        <Button type="button" variant="outline" onClick={() => setSaved(true)}>
+          {t(copy.draft)}
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={() => {
+            setValues({});
+            setErrors({});
+            setSaved(false);
+          }}
+        >
+          {t(copy.cancel)}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+function TableFlow({ d, locale, initialState = "default" }: FlowProps) {
+  const t = text(locale),
+    [query, setQuery] = useState(
+      initialState === "empty" ? "no matching fixture" : ""
+    ),
+    [status, setStatus] = useState(d.tabStatuses?.[0] ? t(d.tabStatuses[0]) : "all"),
+    [category, setCategory] = useState("all"),
+    [sort, setSort] = useState("newest");
+  const [rows, setRows] = useState(
+    (d.rows ?? []).map((cells, i) => ({
+      id: `record-${i}`,
+      cells: cells.map(t),
+    }))
+  );
+  const [opened, setOpened] = useState(""),
+    [confirmed, setConfirmed] = useState(false),
+    [assignee, setAssignee] = useState(""),
+    [failed, setFailed] = useState(initialState === "load-error"),
+    [message, setMessage] = useState(""),
+    [documentName, setDocumentName] = useState(""),
+    [messages, setMessages] = useState<string[]>([]),
+    [declined, setDeclined] = useState(initialState === "declined"),
+    [decision, setDecision] = useState(initialState === "accepted");
+  const [tab, setTab] = useState(
+    initialState === "documents" ? 1 : initialState === "conversation" ? 2 : 0
+  );
+  const selected = rows.find((r) => r.id === opened);
+  const filtered = rows.filter(
+    (r) =>
+      (status === "all" || r.cells.at(-1) === status) &&
+      (category === "all" || r.cells[1] === category) &&
+      r.cells
+        .join(" ")
+        .toLocaleLowerCase(locale)
+        .includes(query.toLocaleLowerCase(locale))
+  );
+  const dateIndex = d.columns?.findIndex(column => column.en === 'Date') ?? -1
+  const ordered = [...filtered].sort((a,b) => {
+    const comparison = dateIndex >= 0 ? a.cells[dateIndex].localeCompare(b.cells[dateIndex]) : a.cells[0].localeCompare(b.cells[0], locale)
+    return sort === 'oldest' ? comparison : -comparison
+  });
+  const statuses = [...new Set(rows.map((r) => r.cells.at(-1) ?? ""))],
+    categories = [...new Set(rows.map((r) => r.cells[1] ?? ""))];
+  const exportCsv = () => {
+    const escaped = (v: string) => `"${v.replace(/"/g, '""')}"`;
+    const data = [(d.columns ?? []).map(t), ...ordered.map((r) => r.cells)]
+      .map((r) => r.map(escaped).join(","))
+      .join("\n");
+    const url = URL.createObjectURL(
+      new Blob([data], { type: "text/csv;charset=utf-8" })
+    );
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = d.id + "-example.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  if (failed)
+    return (
+      <section className="product-card" role="alert">
+        <p>
+          {t(
+            L(
+              "Records could not be loaded.",
+              "목록을 불러오지 못했어요.",
+              "تعذر تحميل السجلات."
+            )
+          )}
+        </p>
+        <Button onClick={() => setFailed(false)}>
+          {t(L("Retry", "다시 시도", "إعادة المحاولة"))}
+        </Button>
+      </section>
+    );
+  if (d.id === "session-detail-01")
+    return (
+      <>
+        <StatStrip
+          items={[
+            {
+              label: t(L("Session", "세션", "الجلسة")),
+              value: t(L("Design review", "디자인 리뷰", "مراجعة التصميم")),
+            },
+            {
+              label: t(L("Scheduled", "예정", "موعد")),
+              value: "2026-09-14 10:00",
+            },
+          ]}
+        />
+        <div className="workflow-tabs">
+          {d.tabs?.map((label, i) => (
+            <Button
+              key={i}
+              variant="outline"
+              aria-pressed={tab === i}
+              onClick={() => setTab(i)}
+            >
+              {t(label)}
+            </Button>
+          ))}
+        </div>
+        {tab === 0 ? (
+          <section className="product-card">
+            <h4>
+              {t(L("Shared preparation", "공동 준비 사항", "التحضير المشترك"))}
+            </h4>
+            {["Learning goals", "Strategy", "Challenges", "Contingency"].map(
+              (_, i) => (
+                <p key={i}>
+                  {t(
+                    [
+                      L(
+                        "Goals: validate the first-run experience.",
+                        "목표: 첫 사용 경험 검증.",
+                        "الأهداف: التحقق من تجربة الاستخدام الأولى."
+                      ),
+                      L(
+                        "Strategy: review the prototype together.",
+                        "전략: 프로토타입 공동 리뷰.",
+                        "الاستراتيجية: مراجعة النموذج معاً."
+                      ),
+                      L(
+                        "Challenge: first-time users need context.",
+                        "과제: 신규 사용자에게 맥락 전달.",
+                        "التحدي: يحتاج المستخدم الجديد للسياق."
+                      ),
+                      L(
+                        "Fallback: continue with the shared notes.",
+                        "대안: 공유 메모로 이어가기.",
+                        "البديل: المتابعة بالملاحظات المشتركة."
+                      ),
+                    ][i]
+                  )}
+                </p>
+              )
+            )}
+          </section>
+        ) : tab === 1 ? (
+          <WorkflowFields
+            fields={[
+              {
+                id: "document",
+                label: t(L("Add document", "문서 추가", "إضافة مستند")),
+                type: "file",
+                accept: ".pdf",
+              },
+            ]}
+            values={{ document: documentName }}
+            onChange={() => {}}
+            onFile={(_, file) => setDocumentName(file?.name ?? "")}
+          />
+        ) : (
+          <div className="product-card">
+            <ul aria-live="polite">
+              {messages.map((m, i) => (
+                <li key={i}>{m}</li>
+              ))}
+            </ul>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (message.trim()) {
+                  setMessages((m) => [...m, message.trim()]);
+                  setMessage("");
+                }
+              }}
+            >
+              <label>
+                {t(copy.message)}
+                <TextInput
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                />
+              </label>
+              <Button type="submit" disabled={!message.trim()}>
+                {t(copy.send)}
+              </Button>
+            </form>
+          </div>
+        )}
+      </>
+    );
+  if (d.id === "request-decision-01")
+    return (
+      <>
+        {decision || declined ? (
+          <Result
+            locale={locale}
+            message={t(
+              decision
+                ? L(
+                    "Request accepted in preview.",
+                    "미리보기에서 수락했어요.",
+                    "قُبل الطلب في المعاينة."
+                  )
+                : L(
+                    "Request declined in preview.",
+                    "미리보기에서 거절했어요.",
+                    "رُفض الطلب في المعاينة."
+                  )
+            )}
+            onReset={() => {
+              setDecision(false);
+              setDeclined(false);
+            }}
+          />
+        ) : (
+          <section className="product-card">
+            <h4>
+              {t(
+                L(
+                  "Design review with Alex",
+                  "Alex와 디자인 리뷰",
+                  "مراجعة التصميم مع أليكس"
+                )
+              )}
+            </h4>
+            <p>2026-09-14 · 10:00</p>
+            <p>
+              {t(
+                L(
+                  "Goals: improve first-run navigation. Supporting documents and previous feedback are reviewed before a decision.",
+                  "목표: 첫 사용 탐색 개선. 결정 전에 참고 문서와 이전 피드백을 검토합니다.",
+                  "الهدف: تحسين التنقل الأول. راجع المستندات والملاحظات السابقة قبل القرار."
+                )
+              )}
+            </p>
+            <div className="product-actions">
+              <Button onClick={() => setDecision(true)}>{t(d.action!)}</Button>
+              <Button variant="outline" onClick={() => setDeclined(true)}>
+                {t(L("Decline", "거절", "رفض"))}
+              </Button>
+            </div>
+          </section>
+        )}
+      </>
+    );
+  return (
+    <>
+      <div className="product-toolbar">
+        <label>
+          {t(copy.search)}
+          <TextInput
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </label>
+        <label>
+          {t(copy.status)}
+          <NativeSelect
+            aria-label={t(copy.status)}
+            value={status}
+            onChange={(e) => {
+              setStatus(e.target.value);
+              setTab(d.tabStatuses?.findIndex(value => t(value) === e.target.value) ?? -1);
+            }}
+          >
+            <option value="all">{t(copy.all)}</option>
+            {statuses.map((v) => (
+              <option key={v}>{v}</option>
+            ))}
+          </NativeSelect>
+        </label>
+        <label>
+          {t(copy.category)}
+          <NativeSelect
+            aria-label={t(copy.category)}
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+          >
+            <option value="all">{t(copy.all)}</option>
+            {categories.map((v) => (
+              <option key={v}>{v}</option>
+            ))}
+          </NativeSelect>
+        </label>
+        <label>
+          {t(copy.sort)}
+          <NativeSelect
+            aria-label={t(copy.sort)}
+            value={sort}
+            onChange={(e) => setSort(e.target.value)}
+          >
+            <option value="newest">{t(copy.newest)}</option>
+            <option value="oldest">{t(copy.oldest)}</option>
+          </NativeSelect>
+        </label>
+      </div>
+      <div className="product-actions">
+        <Button
+          variant="outline"
+          onClick={() => {
+            setQuery("");
+            setStatus("all");
+            setTab(-1);
+            setCategory("all");
+          }}
+        >
+          {t(copy.reset)}
+        </Button>
+        <Button variant="outline" onClick={exportCsv}>
+          {t(copy.export)}
+        </Button>
+      </div>
+      {d.tabs?.length ? (
+        <div className="workflow-tabs">
+          {d.tabs.map((label, i) => (
+            <Button
+              key={i}
+              variant="outline"
+              aria-pressed={tab === i}
+              onClick={() => {
+                setTab(i);
+                setStatus(d.tabStatuses?.[i] ? t(d.tabStatuses[i]) : statuses[i] ?? "all");
+              }}
+            >
+              {t(label)}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      <RecordTable
+        caption={t(d.title)}
+        columns={(d.columns ?? []).map(t)}
+        rows={ordered}
+        emptyLabel={t(copy.empty)}
+        actionLabel={t(copy.open)}
+        onOpen={(id) => {
+          setOpened(id);
+          setConfirmed(false);
+        }}
+      />
+      {selected ? (
+        <section className="product-card" aria-label={t(copy.open)}>
+          <h4>{selected.cells[0]}</h4>
+          {selected.cells.slice(1).map((v, i) => (
+            <p key={i}>
+              {t(d.columns![i + 1])}: {v}
+            </p>
+          ))}
+          {d.action ? (
+            <>
+              <p>{t(copy.confirmHint)}</p>
+              {d.id === "matching-escalations-01" ? (
+                <label>
+                  {t(
+                    L("Eligible expert", "배정 가능한 전문가", "الخبير المؤهل")
+                  )}
+                  <NativeSelect
+                    value={assignee}
+                    onChange={(e) => setAssignee(e.target.value)}
+                  >
+                    <option value="">—</option>
+                    <option>Alex Kim</option>
+                    <option>Noor Ali</option>
+                  </NativeSelect>
+                </label>
+              ) : null}
+              <Button
+                disabled={
+                  confirmed ||
+                  (d.id === 'payment-cycle-01' && selected.cells.at(-1) === t(L('Paid', '지급 완료', 'مدفوع'))) ||
+                  (d.id === 'broadcast-management-01' && selected.cells.at(-1) === t(copy.ended)) ||
+                  (d.id === "matching-escalations-01" && !assignee) ||
+                  (d.id === "closure-queue-01" &&
+                    selected.cells.at(-1) !==
+                      t(L("Completed", "완료", "مكتمل")))
+                }
+                onClick={() => {
+                  setConfirmed(true);
+                  if (d.id === "provider-connections-01") return;
+                  const next =
+                    d.id === "payment-cycle-01"
+                      ? selected.cells.at(-1) ===
+                        t(L("Queued", "대기", "في الانتظار"))
+                        ? t(L("Invoiced", "청구됨", "مفوتر"))
+                        : t(L("Paid", "지급 완료", "مدفوع"))
+                      : d.id === "broadcast-management-01"
+                      ? selected.cells.at(-1) === t(L("Draft", "초안", "مسودة"))
+                        ? t(L("Scheduled", "예약됨", "مجدول"))
+                        : selected.cells.at(-1) === t(L('Scheduled','예약됨','مجدول')) ? t(L('Live','방송 중','مباشر')) : t(copy.ended)
+                      : t(L("Completed", "완료", "مكتمل"));
+                  setRows((rs) =>
+                    rs.map((r) =>
+                      r.id === selected.id
+                        ? { ...r, cells: [...r.cells.slice(0, -1), next] }
+                        : r
+                    )
+                  );
+                }}
+              >
+                {t(d.action)}
+              </Button>
+            </>
+          ) : null}
+          {confirmed ? <p role="status">{t(copy.done)}</p> : null}
+          <Button variant="ghost" onClick={() => setOpened("")}>
+            {t(copy.close)}
+          </Button>
+        </section>
+      ) : null}
+    </>
+  );
+}
+
+function ChecklistFlow({ d, locale, initialState = "default" }: FlowProps) {
+  const t = text(locale),
+    checks = d.checks ?? [],
+    [values, setValues] = useState(
+      checks.map((_, i) =>
+        initialState === "complete"
+          ? "pass"
+          : initialState === "failed" && i === 0
+          ? "fail"
+          : ['midway','review'].includes(initialState) && i === 0
+          ? "pass"
+          : "pending"
+      )
+    ),
+    [finished, setFinished] = useState(false),
+    [notes, setNotes] = useState("");
+  const allPass = values.every((v) => v === "pass"),
+    progress = values.filter((v) => v === "pass").length;
+  if (finished)
+    return (
+      <Result
+        locale={locale}
+        onReset={() => {
+          setFinished(false);
+          setValues(checks.map(() => "pending"));
+        }}
+      />
+    );
+  return (
+    <>
+      <StatStrip
+        items={[
+          {
+            label: t(L("Completed steps", "완료한 항목", "الخطوات المكتملة")),
+            value: `${progress} / ${checks.length}`,
+          },
+        ]}
+      />
+      {initialState === "review" ? (
+        <p role="status">
+          {t(
+            L(
+              "Waiting for the reviewer. Completed steps are preserved.",
+              "검토 담당자를 기다리는 중입니다. 완료한 단계는 유지됩니다.",
+              "بانتظار المراجع. تُحفظ الخطوات المكتملة."
+            )
+          )}
+        </p>
+      ) : null}
+      {d.kind === "progress" ? (
+        <ol className="workflow-checklist">
+          {checks.map((c, i) => (
+            <li className="product-card" key={i}>
+              <h4>{t(c)}</h4>
+              {i > progress || (initialState === 'review' && i === progress) ? (
+                <p>{t(copy.locked)}</p>
+              ) : (
+                <a href={href(d.related![i])}>{t(copy.next)}</a>
+              )}
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <StepChecklist
+          items={checks.map((c, i) => ({
+            id: String(i),
+            label: t(c),
+            description:
+              values[i] === "fail"
+                ? t(
+                    L(
+                      "Retry this check after resolving the issue. No support request was sent.",
+                      "문제를 해결한 뒤 다시 확인하세요. 지원 요청은 전송하지 않았습니다.",
+                      "أعد الفحص بعد حل المشكلة. لم يُرسل طلب دعم."
+                    )
+                  )
+                : t(copy.demo),
+            state: values[i],
+            disabled:
+              d.id === "verification-checklist-01" &&
+              i === checks.length - 1 &&
+              values.slice(0, -1).some((v) => v !== "pass"),
+          }))}
+          passLabel={t(copy.pass)}
+          failLabel={t(copy.fail)}
+          onChange={(id, state) =>
+            setValues((v) => v.map((x, i) => (i === Number(id) ? state : x)))
+          }
+        />
+      )}
+      {d.id === "verification-checklist-01" ? (
+        <label>
+          {t(copy.note)}
+          <TextArea value={notes} onChange={(e) => setNotes(e.target.value)} />
+        </label>
+      ) : null}
+      <Button disabled={!allPass} onClick={() => setFinished(true)}>
+        {t(copy.next)}
+      </Button>
+    </>
+  );
+}
+
+function AssessmentFlow({ d, locale, initialState }: FlowProps) {
+  const t = text(locale),
+    [scores, setScores] = useState<number[]>((d.checks ?? []).map(() => 0)),
+    [feedback, setFeedback] = useState(""),
+    [recommendation, setRecommendation] = useState(""),
+    [level, setLevel] = useState(""),
+    [done, setDone] = useState(initialState === "complete"),
+    [draft, setDraft] = useState(false);
+  const structured = d.id === "structured-assessment-01",
+    all = scores.every(Boolean),
+    canSubmit =
+      all &&
+      (!structured ||
+        (feedback.trim().length >= 200 && recommendation.trim() && level));
+  if (done)
+    return (
+      <Result
+        locale={locale}
+        onReset={() => {
+          setDone(false);
+          setScores(scores.map(() => 0));
+          setFeedback("");
+          setRecommendation("");
+          setLevel("");
+        }}
+      />
+    );
+  return (
+    <>
+      <RatingFields
+        labels={(d.checks ?? []).map(t)}
+        values={scores}
+        onChange={(i, n) => {
+          setScores((s) => s.map((v, j) => (i === j ? n : v)));
+          setDraft(false);
+        }}
+      />
+      <StatStrip
+        items={[
+          {
+            label: t(L("Average", "평균", "المتوسط")),
+            value: all
+              ? (scores.reduce((a, b) => a + b, 0) / scores.length).toFixed(1)
+              : "—",
+          },
+        ]}
+      />
+      {structured ? (
+        <label>
+          {t(L("Supervision level", "지도 수준", "مستوى الإشراف"))}
+          <NativeSelect
+            value={level}
+            aria-label={t(L('Supervision level', '지도 수준', 'مستوى الإشراف'))}
+            onChange={(e) => setLevel(e.target.value)}
+          >
+            <option value="">—</option>
+            {[
+              L("Observe", "관찰", "مراقبة"),
+              L("Assist", "보조", "مساعدة"),
+              L("Supervised", "지도하 수행", "تحت إشراف"),
+              L("Independent", "독립 수행", "مستقل"),
+            ].map((c) => (
+              <option key={c.en}>{t(c)}</option>
+            ))}
+          </NativeSelect>
+        </label>
+      ) : null}
+      <label>
+        {t(L("Feedback", "피드백", "الملاحظات"))}
+        {structured ? " (200+)" : ""}
+        <TextArea
+          aria-label={`${t(L("Feedback", "피드백", "الملاحظات"))}${structured ? " (200+)" : ""}`}
+          maxLength={structured ? 1000 : 500}
+          value={feedback}
+          onChange={(e) => {
+            setFeedback(e.target.value);
+            setDraft(false);
+          }}
+        />
+      </label>
+      {structured ? (
+        <label>
+          {t(
+            L(
+              "Next-step recommendations",
+              "다음 단계 권고",
+              "توصيات الخطوة التالية"
+            )
+          )}
+          <TextArea
+            maxLength={500}
+            value={recommendation}
+            onChange={(e) => setRecommendation(e.target.value)}
+          />
+        </label>
+      ) : null}
+      <div className="product-actions">
+        <Button disabled={!canSubmit} onClick={() => setDone(true)}>
+          {t(copy.submit)}
+        </Button>
+        <Button variant="outline" onClick={() => setDraft(true)}>
+          {t(copy.draft)}
+        </Button>
+      </div>
+      {draft ? <p role="status">{t(copy.saved)}</p> : null}
+    </>
+  );
+}
+
+function AllocationFlow({ locale, initialState }: WorkflowProps) {
+  const t = text(locale),
+    [amounts, setAmounts] = useState([
+      initialState === "over-budget" ? 30 : 0,
+      0,
+    ]),
+    [done, setDone] = useState(initialState === "complete"),
+    total = amounts.reduce((a, b) => a + b, 0),
+    budget = 20;
+  if (done)
+    return (
+      <Result
+        locale={locale}
+        onReset={() => {
+          setDone(false);
+          setAmounts([0, 0]);
+        }}
+      />
+    );
+  return (
+    <>
+      <StatStrip
+        items={[
+          { label: t(copy.available), value: String(budget) },
+          { label: t(copy.total), value: String(total) },
+          { label: t(copy.remaining), value: String(budget - total) },
+        ]}
+      />
+      <WorkflowFields
+        fields={["Alex Kim", "Noor Ali"].map((label, i) => ({
+          id: String(i),
+          label,
+          type: "number",
+          min: 0,
+          max: budget,
+        }))}
+        values={Object.fromEntries(amounts.map((v, i) => [i, String(v)]))}
+        onChange={(id, value) =>
+          setAmounts((a) =>
+            a.map((v, i) =>
+              i === Number(id) ? Math.max(0, Math.floor(Number(value) || 0)) : v
+            )
+          )
+        }
+      />
+      {total > budget ? (
+        <p role="alert">
+          {t(
+            L(
+              "Allocation exceeds the available pool.",
+              "배분 합계가 잔액을 초과해요.",
+              "التوزيع يتجاوز الرصيد المتاح."
+            )
+          )}
+        </p>
+      ) : null}
+      <Button
+        disabled={total <= 0 || total > budget}
+        onClick={() => setDone(true)}
+      >
+        {t(copy.confirm)}
+      </Button>
+    </>
+  );
+}
+
+function DashboardFlow({ d, locale, initialState }: FlowProps) {
+  const t = text(locale),
+    [tab, setTab] = useState(0),
+    empty = initialState === "empty",
+    skill = d.id === "skill-progression-01",
+    expert = d.id === "expert-overview-01",
+    analytics = d.id === "analytics-01";
+  const labels = skill
+    ? [
+        L("Sessions", "세션", "الجلسات"),
+        L("Average rating", "평균 점수", "متوسط التقييم"),
+        L("Milestones", "마일스톤", "المراحل"),
+      ]
+    : expert
+    ? [
+        L("Available requests", "가능한 요청", "الطلبات المتاحة"),
+        L("Upcoming sessions", "예정 세션", "الجلسات القادمة"),
+        L("Rating", "평점", "التقييم"),
+      ]
+    : analytics
+    ? [
+        L("Completed sessions", "완료 세션", "الجلسات المكتملة"),
+        L("Active people", "활성 사용자", "الأشخاص النشطون"),
+        L("On-time assessments", "기한 내 평가", "تقييمات في الموعد"),
+      ]
+    : [
+        L("Allocated", "배분", "المخصص"),
+        L("In use", "사용 중", "قيد الاستخدام"),
+        L("Consumed", "소진", "المستهلك"),
+      ];
+  const tabs = [
+    L("Overview", "현황", "نظرة عامة"),
+    skill
+      ? L("Skill trends", "역량 추세", "اتجاه المهارات")
+      : L("Trends", "추세", "الاتجاهات"),
+    skill
+      ? L("Milestones", "마일스톤", "المراحل")
+      : analytics
+      ? L("Risk signals", "위험 신호", "إشارات المخاطر")
+      : L("History", "내역", "السجل"),
+  ];
+  return (
+    <>
+      {initialState === "low-balance" ? (
+        <p role="status">
+          {t(
+            L(
+              "The available balance is low. Review the allocation before scheduling.",
+              "남은 잔액이 적어요. 일정을 잡기 전에 배분을 확인하세요.",
+              "الرصيد منخفض. راجع التخصيص قبل الجدولة."
+            )
+          )}
+        </p>
+      ) : null}
+      <StatStrip
+        items={labels.map((label, i) => ({
+          label: t(label),
+          value: empty ? '0' : (skill ? ['4','3.8 / 5','2'] : expert ? ['3','2','4.8 / 5'] : analytics ? ['56','33','96%'] : ['20','4','12'])[i],
+        }))}
+      />
+      <div className="workflow-tabs">
+        {tabs.map((c, i) => (
+          <Button
+            variant="outline"
+            aria-pressed={tab === i}
+            key={i}
+            onClick={() => setTab(i)}
+          >
+            {t(c)}
+          </Button>
+        ))}
+      </div>
+      {empty ? (
+        <p role="status">{t(copy.empty)}</p>
+      ) : tab === 1 ? (
+        <TrendSummary
+          title={t(tabs[1])}
+          items={["Apr", "May", "Jun", "Jul"].map((label, i) => ({
+            label,
+            value: skill ? [2.7,3.1,3.8,4.2][i] : [4, 11, 22, 38][i],
+            max: skill ? 5 : 40,
+          }))}
+        />
+      ) : tab === 2 && skill ? (
+        <ul className="workflow-checklist">
+          {[
+            L(
+              "First session completed",
+              "첫 세션 완료",
+              "اكتملت الجلسة الأولى"
+            ),
+            L("Five sessions — 4 / 5", "5회 세션 — 4 / 5", "خمس جلسات — 4 / 5"),
+            L(
+              "Supervised practice achieved",
+              "지도하 수행 달성",
+              "تحققت الممارسة تحت إشراف"
+            ),
+          ].map((c) => (
+            <li className="product-card" key={c.en}>
+              {t(c)}
+            </li>
+          ))}
+        </ul>
+      ) : tab === 2 && analytics ? (
+        <section className="product-card">
+          <h4>
+            {t(
+              L(
+                "Progress needs attention",
+                "성장 추이 확인 필요",
+                "التقدم يحتاج انتباهاً"
+              )
+            )}
+          </h4>
+          <p>
+            {t(
+              L(
+                "The latest two ratings are lower. Review the assessment details.",
+                "최근 두 평가 점수가 낮아졌습니다. 상세 평가를 확인하세요.",
+                "انخفض آخر تقييمين. راجع تفاصيل التقييم."
+              )
+            )}
+          </p>
+          <a href={href("structured-assessment-01")}>{t(copy.open)}</a>
+        </section>
+      ) : (
+        <RecordTable
+          caption={t(tabs[tab])}
+          columns={(d.columns ?? []).map(t)}
+          rows={(d.rows ?? []).map((r, i) => ({
+            id: String(i),
+            cells: r.map(t),
+          }))}
+          emptyLabel={t(copy.empty)}
+          actionLabel={t(copy.open)}
+        />
+      )}
+    </>
+  );
+}
+
+function SettingsFlow({ locale, initialState = "account" }: WorkflowProps) {
+  const t = text(locale),
+    tabs = [
+      "account",
+      "notifications",
+      "security",
+      "appearance",
+      "devices",
+      "closure",
+    ],
+    labels = [
+      L("Account", "계정", "الحساب"),
+      L("Notifications", "알림", "الإشعارات"),
+      L("Security", "보안", "الأمان"),
+      L("Appearance", "표시", "المظهر"),
+      L("Devices", "기기", "الأجهزة"),
+      L("Close account", "계정 종료", "إغلاق الحساب"),
+    ];
+  const [tab, setTab] = useState(initialState),
+    [values, setValues] = useState<Record<string, string>>({
+      name: "Alex Kim",
+      email: "alex@example.test",
+    }),
+    [saved, setSaved] = useState(false),
+    [devices, setDevices] = useState(["Laptop · Chrome", "Phone · Safari"]),
+    [confirm, setConfirm] = useState(""),
+    [closed, setClosed] = useState(false);
+  const fields =
+    tab === "account"
+      ? [
+          { id: "name", label: t(L("Name", "이름", "الاسم")) },
+          {
+            id: "email",
+            label: t(L("Email", "이메일", "البريد")),
+            type: "email" as const,
+          },
+        ]
+      : tab === "notifications"
+      ? ["Weekly digest", "Browser notifications", "Product news"].map(
+          (_, i) => ({
+            id: "n" + i,
+            label: t(
+              [
+                L("Weekly digest", "주간 요약", "ملخص أسبوعي"),
+                L("Browser notifications", "브라우저 알림", "إشعارات المتصفح"),
+                L("Product news", "제품 소식", "أخبار المنتج"),
+              ][i]
+            ),
+            type: "check" as const,
+          })
+        )
+      : tab === "appearance"
+      ? [
+          {
+            id: "theme",
+            label: t(L("Color mode", "색상 모드", "وضع الألوان")),
+            type: "select" as const,
+            options: [
+              t(L("System", "시스템", "النظام")),
+              t(L("Light", "밝게", "فاتح")),
+              t(L("Dark", "어둡게", "داكن")),
+            ],
+          },
+          {
+            id: "density",
+            label: t(L("Density", "밀도", "الكثافة")),
+            type: "select" as const,
+            options: [
+              t(L("Comfortable", "편안하게", "مريح")),
+              t(L("Compact", "촘촘하게", "مضغوط")),
+            ],
+          },
+        ]
+      : [];
+  return (
+    <>
+      <div className="workflow-tabs">
+        {tabs.map((key, i) => (
+          <Button
+            key={key}
+            variant="outline"
+            aria-pressed={tab === key}
+            onClick={() => {
+              setTab(key);
+              setSaved(false);
+            }}
+          >
+            {t(labels[i])}
+          </Button>
+        ))}
+      </div>
+      {fields.length ? (
+        <WorkflowFields
+          fields={fields}
+          values={values}
+          onChange={(id, value) => {
+            setValues((v) => ({ ...v, [id]: value }));
+            setSaved(false);
+          }}
+        />
+      ) : tab === "security" ? (
+        <div className="product-card">
+          <a href={href("password-reset-01")}>
+            {t(L("Change password", "비밀번호 변경", "تغيير كلمة المرور"))}
+          </a>
+          <a href={href("two-factor-01")}>
+            {t(
+              L("Two-factor authentication", "2단계 인증", "المصادقة الثنائية")
+            )}
+          </a>
+          <Button variant="outline" onClick={() => setTab("devices")}>
+            {t(
+              L(
+                "Review active devices",
+                "접속 기기 검토",
+                "مراجعة الأجهزة النشطة"
+              )
+            )}
+          </Button>
+        </div>
+      ) : tab === "devices" ? (
+        <ul className="workflow-checklist">
+          {devices.map((device, i) => (
+            <li className="product-card" key={device}>
+              <strong>{device}</strong>
+              {i === 0 ? (
+                <p>{t(L("Current device", "현재 기기", "الجهاز الحالي"))}</p>
+              ) : (
+                <Button
+                  variant="outline"
+                  onClick={() =>
+                    setDevices((ds) => ds.filter((x) => x !== device))
+                  }
+                >
+                  {t(
+                    L(
+                      "Sign out in preview",
+                      "미리보기에서 로그아웃",
+                      "تسجيل الخروج في المعاينة"
+                    )
+                  )}
+                </Button>
+              )}
+            </li>
+          ))}
+        </ul>
+      ) : closed ? (
+        <Result
+          locale={locale}
+          onReset={() => {
+            setClosed(false);
+            setConfirm("");
+          }}
+        />
+      ) : (
+        <section className="product-card">
+          <p>
+            {t(
+              L(
+                "Type CLOSE to simulate an account closure request. No account is removed.",
+                "계정 종료 요청 체험은 CLOSE를 입력하세요. 실제 계정은 삭제되지 않습니다.",
+                "اكتب CLOSE لمحاكاة طلب الإغلاق. لن يُحذف حساب."
+              )
+            )}
+          </p>
+          <TextInput
+            aria-label={t(L("Confirmation", "확인 문구", "التأكيد"))}
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+          />
+          <Button
+            disabled={confirm !== "CLOSE"}
+            onClick={() => setClosed(true)}
+          >
+            {t(copy.confirm)}
+          </Button>
+        </section>
+      )}
+      {fields.length ? (
+        <Button onClick={() => setSaved(true)}>{t(copy.save)}</Button>
+      ) : null}
+      {saved ? <p role="status">{t(copy.saved)}</p> : null}
+    </>
+  );
+}
+
+function MediaFlow({ d, locale, initialState = "live" }: FlowProps) {
+  const t = text(locale),
+    collaboration = d.id === "live-session-01",
+    [status, setStatus] = useState(initialState),
+    [playing, setPlaying] = useState(false),
+    [mic, setMic] = useState(true),
+    [note, setNote] = useState(""),
+    [events, setEvents] = useState<string[]>([]),
+    [reminder, setReminder] = useState(false),
+    [endConfirm, setEndConfirm] = useState(false);
+  return (
+    <>
+      <MediaStage
+        label={t(d.title)}
+        status={
+          status === "connection-lost"
+            ? t(
+                L(
+                  "Connection interrupted. Use the agreed fallback.",
+                  "연결이 끊겼어요. 약속된 대체 수단을 사용하세요.",
+                  "انقطع الاتصال. استخدم البديل المتفق عليه."
+                )
+              )
+            : status === "ended"
+            ? t(copy.ended)
+            : status === "scheduled"
+            ? "2026-09-14 · 10:00"
+            : t(
+                playing
+                  ? L("Playing example", "재생 체험 중", "تشغيل المثال")
+                  : copy.previewMedia
+              )
+        }
+      >
+        {status === "connection-lost" ? (
+          <Button onClick={() => setStatus("live")}>
+            {t(L("Simulate recovery", "복구 체험", "محاكاة الاسترداد"))}
+          </Button>
+        ) : status === "scheduled" ? (
+          <Button
+            aria-pressed={reminder}
+            onClick={() => setReminder((r) => !r)}
+          >
+            {t(
+              reminder
+                ? L(
+                    "Reminder selected (preview)",
+                    "알림 선택됨(체험)",
+                    "تم اختيار التذكير (معاينة)"
+                  )
+                : L("Notify me", "알림 받기", "ذكّرني")
+            )}
+          </Button>
+        ) : status !== "ended" ? (
+          <Button onClick={() => setPlaying((p) => !p)}>
+            {t(playing ? copy.pause : copy.play)}
+          </Button>
+        ) : null}
+      </MediaStage>
+      {collaboration && status !== "ended" ? (
+        <>
+          <div className="product-card">
+            <h4>{t(L("Participants", "참가자", "المشاركون"))}</h4>
+            <p>Alex Kim · Noor Ali</p>
+            <Button
+              variant="outline"
+              aria-pressed={!mic}
+              onClick={() => setMic((v) => !v)}
+            >
+              {t(
+                mic
+                  ? L(
+                      "Mute microphone (preview)",
+                      "마이크 끄기(체험)",
+                      "كتم الميكروفون (معاينة)"
+                    )
+                  : L(
+                      "Unmute microphone (preview)",
+                      "마이크 켜기(체험)",
+                      "تشغيل الميكروفون (معاينة)"
+                    )
+              )}
+            </Button>
+          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (note.trim()) {
+                setEvents((v) => [...v, note.trim()]);
+                setNote("");
+              }
+            }}
+          >
+            <label>
+              {t(L("Incident note", "이슈 메모", "ملاحظة حادث"))}
+              <TextArea
+                maxLength={200}
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+              />
+            </label>
+            <Button type="submit" disabled={!note.trim()}>
+              {t(L("Log example event", "예시 이슈 기록", "تسجيل حدث تجريبي"))}
+            </Button>
+          </form>
+          <ul aria-live="polite">
+            {events.map((event, i) => (
+              <li key={i}>{event}</li>
+            ))}
+          </ul>
+          <div className="product-actions">
+            <Button
+              variant="outline"
+              onClick={() => setStatus("connection-lost")}
+            >
+              {t(
+                L(
+                  "Simulate disconnection",
+                  "연결 끊김 체험",
+                  "محاكاة انقطاع الاتصال"
+                )
+              )}
+            </Button>
+            <Button variant="outline" onClick={() => setEndConfirm(true)}>
+              {t(L("End session", "세션 종료", "إنهاء الجلسة"))}
+            </Button>
+          </div>
+          {endConfirm ? (
+            <section className="product-card">
+              <p>{t(copy.confirmHint)}</p>
+              <Button
+                onClick={() => {
+                  setStatus("ended");
+                  setEndConfirm(false);
+                }}
+              >
+                {t(copy.confirm)}
+              </Button>
+              <Button variant="ghost" onClick={() => setEndConfirm(false)}>
+                {t(copy.cancel)}
+              </Button>
+            </section>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+}
+
+function ContentFlow({ d, locale, initialState }: FlowProps) {
+  const t = text(locale),
+    [tab, setTab] = useState(0),
+    [opened, setOpened] = useState(false),
+    [email, setEmail] = useState(""),
+    [subscribed, setSubscribed] = useState(false),
+    intro = d.id === "product-introduction-01";
+  const titles = [
+    L(
+      "Structured learning at scale",
+      "확장 가능한 체계적 학습",
+      "تعلم منظم على نطاق واسع"
+    ),
+    L(
+      "How technology supports better feedback",
+      "더 나은 피드백을 돕는 기술",
+      "كيف تدعم التقنية ملاحظات أفضل"
+    ),
+  ];
+  return (
+    <>
+      <div className="workflow-tabs">
+        {d.tabs?.map((c, i) => (
+          <Button
+            key={i}
+            variant="outline"
+            aria-pressed={tab === i}
+            onClick={() => {
+              setTab(i);
+              setOpened(false);
+            }}
+          >
+            {t(c)}
+          </Button>
+        ))}
+      </div>
+      {intro ? (
+        <>
+          <section className="product-card">
+            <h4>{t(d.tabs![tab])}</h4>
+            <p>
+              {t(
+                [
+                  L(
+                    "Get guidance, practice and structured feedback.",
+                    "안내·실습·체계적인 피드백을 경험하세요.",
+                    "احصل على الإرشاد والتدريب والملاحظات المنظمة."
+                  ),
+                  L(
+                    "Manage availability, requests and follow-up.",
+                    "가능 시간·요청·후속 작업을 관리하세요.",
+                    "إدارة التوفر والطلبات والمتابعة."
+                  ),
+                  L(
+                    "Allocate resources and follow team outcomes.",
+                    "자원을 배분하고 팀의 성과를 확인하세요.",
+                    "وزع الموارد وتابع نتائج الفريق."
+                  ),
+                ][tab]
+              )}
+            </p>
+          </section>
+          {[
+            L("How do I start?", "어떻게 시작하나요?", "كيف أبدأ؟"),
+            L(
+              "Can a team participate?",
+              "팀으로 참여할 수 있나요?",
+              "هل يمكن للفريق المشاركة؟"
+            ),
+          ].map((c) => (
+            <details className="product-card" key={c.en}>
+              <summary>{t(c)}</summary>
+              <p>
+                {t(
+                  L(
+                    "Choose the flow that matches your goal and complete the required setup.",
+                    "목적에 맞는 흐름을 선택하고 필요한 설정을 완료하세요.",
+                    "اختر المسار المناسب لهدفك وأكمل الإعداد المطلوب."
+                  )
+                )}
+              </p>
+            </details>
+          ))}
+        </>
+      ) : initialState === "empty" ? (
+        <p role="status">{t(copy.empty)}</p>
+      ) : opened ? (
+        <section className="product-card">
+          <h4>{t(titles[tab === 2 ? 1 : 0])}</h4>
+          <p>
+            {t(
+              L(
+                "Clear goals, timely feedback and a record of decisions help people build on what they have learned. This is sample article content.",
+                "명확한 목표·적시의 피드백·결정 기록은 배운 내용을 다음 작업에 활용하도록 돕습니다. 예시 본문입니다.",
+                "تساعد الأهداف الواضحة والملاحظات في وقتها وسجل القرارات على البناء على التعلم. هذا نص تجريبي."
+              )
+            )}
+          </p>
+          <Button variant="outline" onClick={() => setOpened(false)}>
+            {t(copy.back)}
+          </Button>
+        </section>
+      ) : (
+        <ul className="product-grid">
+          {titles
+            .filter((_, i) => tab === 0 || i === tab - 1)
+            .map((c) => (
+              <li className="product-card" key={c.en}>
+                <h4>{t(c)}</h4>
+                <p>2026-09-10 · Alex Kim</p>
+                <Button variant="outline" onClick={() => setOpened(true)}>
+                  {t(L("Read article", "글 읽기", "قراءة المقال"))}
+                </Button>
+              </li>
+            ))}
+        </ul>
+      )}
+      {!intro ? (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) setSubscribed(true);
+          }}
+        >
+          <label>
+            {t(L("Newsletter email", "뉴스레터 이메일", "بريد النشرة"))}
+            <TextInput
+              type="email"
+              required
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                setSubscribed(false);
+              }}
+            />
+          </label>
+          <Button type="submit">
+            {t(L("Subscribe in preview", "구독 체험", "الاشتراك في المعاينة"))}
+          </Button>
+          {subscribed ? <p role="status">{t(copy.done)}</p> : null}
+        </form>
+      ) : null}
+    </>
+  );
+}
+
+function RecoveryFlow({ d, locale, initialState = "default" }: FlowProps) {
+  const t = text(locale),
+    [state, setState] = useState(initialState),
+    [value, setValue] = useState(""),
+    [done, setDone] = useState(false),
+    [seconds, setSeconds] = useState(15),
+    [error, setError] = useState(false);
+  useEffect(() => {
+    if (state !== "attempts" || seconds <= 0) return;
+    const timer = setTimeout(() => setSeconds((s) => s - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [state, seconds]);
+  if (done)
+    return (
+      <Result
+        locale={locale}
+        onReset={() => {
+          setDone(false);
+          setValue("");
+          setError(false);
+        }}
+      />
+    );
+  if (d.kind === "welcome")
+    return (
+      <section className="product-card">
+        <h4>{t(L("Your account is ready", "계정 준비 완료", "حسابك جاهز"))}</h4>
+        <a href={href(d.next!)}>
+          {t(L("Set up your profile", "프로필 설정", "إعداد الملف"))}
+        </a>
+        <Button variant="outline" onClick={() => setDone(true)}>
+          {t(L("Skip for now", "나중에 하기", "التخطي الآن"))}
+        </Button>
+      </section>
+    );
+  if (d.id === "loading-recovery-01")
+    return (
+      <section
+        className="product-card"
+        role={state === "load-error" ? "alert" : "status"}
+      >
+        <h4>
+          {t(
+            state === "loading"
+              ? L(
+                  "Loading records…",
+                  "목록을 불러오는 중…",
+                  "جار تحميل السجلات…"
+                )
+              : state === "not-found"
+              ? L(
+                  "Page not found",
+                  "페이지를 찾을 수 없어요",
+                  "الصفحة غير موجودة"
+                )
+              : state === "empty"
+              ? copy.empty
+              : L("Something went wrong", "문제가 발생했어요", "حدث خطأ")
+          )}
+        </h4>
+        <Button onClick={() => setDone(true)}>
+          {t(
+            state === "loading"
+              ? L(
+                  "Simulate load completion",
+                  "불러오기 완료 체험",
+                  "محاكاة اكتمال التحميل"
+                )
+              : L("Retry example", "재시도 체험", "إعادة محاولة المثال")
+          )}
+        </Button>
+        <a href="#/templates?view=patterns">
+          {t(L("Back to patterns", "패턴 목록으로", "العودة للأنماط"))}
+        </a>
+      </section>
+    );
+  return (
+    <section className="product-card">
+      {state === "attempts" ? (
+        <>
+          <h4>
+            {t(L("Too many attempts", "시도 횟수 초과", "محاولات كثيرة"))}
+          </h4>
+          <p>
+            {seconds}s · {t(copy.demo)}
+          </p>
+          <Button
+            disabled={seconds > 0}
+            onClick={() => setState("device-code")}
+          >
+            {t(L("Try again", "다시 시도", "المحاولة مجدداً"))}
+          </Button>
+          <a href={href("password-recovery-01")}>
+            {t(
+              L("Reset password", "비밀번호 재설정", "إعادة تعيين كلمة المرور")
+            )}
+          </a>
+        </>
+      ) : state === "suspicious" ? (
+        <>
+          <h4>
+            {t(
+              L("Unrecognized device", "확인되지 않은 기기", "جهاز غير معروف")
+            )}
+          </h4>
+          <p>Chrome · Windows</p>
+          <Button onClick={() => setState("device-code")}>
+            {t(L("This was me", "제가 한 거예요", "هذا أنا"))}
+          </Button>
+          <a href={href("account-settings-01")}>
+            {t(L("Secure account", "계정 보호하기", "تأمين الحساب"))}
+          </a>
+        </>
+      ) : (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            const valid =
+              state === "device-code"
+                ? value === "123456"
+                : value === "demo-confirm";
+            setError(!valid);
+            if (valid) setDone(true);
+          }}
+        >
+          <label>
+            {t(
+              state === "device-code"
+                ? L(
+                    "Verification code (example: 123456)",
+                    "인증 코드(예시: 123456)",
+                    "رمز التحقق (مثال: 123456)"
+                  )
+                : L(
+                    "Password (example: demo-confirm)",
+                    "비밀번호(예시: demo-confirm)",
+                    "كلمة المرور (مثال: demo-confirm)"
+                  )
+            )}
+            <TextInput
+              type={state === "device-code" ? "text" : "password"}
+              inputMode={state === "device-code" ? "numeric" : undefined}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              aria-invalid={error}
+            />
+          </label>
+          {error ? <p role="alert">{t(copy.error)}</p> : null}
+          <Button type="submit">{t(copy.confirm)}</Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              setState("suspicious");
+              setValue("");
+              setError(false);
+            }}
+          >
+            {t(copy.cancel)}
+          </Button>
+        </form>
+      )}
+    </section>
+  );
+}