@godxjp/ui 28.10.0 → 28.12.0

package/dist/components/ui/avatar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffectEvent, useLayoutEffect } from "@react-aria/utils";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useImageLoadingStatus } from "../../lib/image-loading-status.js";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 const AvatarContext = React.createContext(null);
@@ -13,42 +14,6 @@ function useAvatarContext(part) {
   }
   return context;
 }
-function getImageLoadingStatus(image) {
-  if (!image.complete) {
-    return "loading";
-  }
-  return image.naturalWidth > 0 ? "loaded" : "error";
-}
-function useImageLoadingStatus(src, {
-  loadingStatus,
-  setLoadingStatus,
-  referrerPolicy,
-  crossOrigin
-}) {
-  useLayoutEffect(() => {
-    if (!src) {
-      setLoadingStatus("error");
-      return;
-    }
-    const image = new window.Image();
-    const handleLoad = (event) => setLoadingStatus(getImageLoadingStatus(event.currentTarget));
-    const handleError = () => setLoadingStatus("error");
-    image.addEventListener("load", handleLoad);
-    image.addEventListener("error", handleError);
-    if (referrerPolicy) {
-      image.referrerPolicy = referrerPolicy;
-    }
-    image.crossOrigin = crossOrigin ?? null;
-    image.src = src;
-    setLoadingStatus(getImageLoadingStatus(image));
-    return () => {
-      image.removeEventListener("load", handleLoad);
-      image.removeEventListener("error", handleError);
-      setLoadingStatus("idle");
-    };
-  }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
-  return loadingStatus;
-}
 const Avatar = React.forwardRef(
   ({
     className,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "28.10.0",
+  "version": "28.12.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -1195,5 +1195,172 @@
       "ledgerLabel": "Ledger ID",
       "ledgerHelper": "A 71-character identifier still stays inside the control"
     }
+  },
+  "serviceLauncherShowcase": {
+    "page": {
+      "title": "ServiceLauncherCard",
+      "subtitle": "Tiles for an organization's internal application list — available, restricted, suspended, archived, loading, and catalog entry."
+    },
+    "status": {
+      "available": "Available",
+      "active": "Active",
+      "maintenance": "Under maintenance",
+      "stopped": "Stopped",
+      "adminOnly": "Admin only",
+      "preparing": "Preparing",
+      "archived": "Archived",
+      "unapplied": "Not requested",
+      "noPermission": "No permission",
+      "attentionRequired": "Attention required"
+    },
+    "action": {
+      "openService": "Open service",
+      "open": "Open",
+      "viewStatus": "View status",
+      "viewHistory": "View history",
+      "checkPermissions": "Check permissions",
+      "openSettings": "Open settings",
+      "viewArchive": "View archive",
+      "openRequestForm": "Open request form",
+      "openList": "Open the list",
+      "openServiceEnglish": "Open service"
+    },
+    "sections": {
+      "basics": {
+        "heading": "1 · Basics · services you can use",
+        "why": "Icon, name, status, description, identifier, action. The status copy always belongs to the consumer — the component only decides what the Badge's tone means.",
+        "attendance": {
+          "title": "Attendance management",
+          "description": "Manage clock-in/out, shifts, and leave requests in one workspace."
+        },
+        "expense": {
+          "title": "Expense reimbursement",
+          "description": "Handles everything from receipt submission and approval to journal-entry sync."
+        },
+        "meetingRoom": {
+          "title": "Meeting room booking",
+          "description": "Book meeting rooms and equipment for each site."
+        }
+      },
+      "statusTones": {
+        "heading": "2 · All 6 statusTone values",
+        "why": "success / warning / destructive / info / neutral / muted. The tone only decides what the Badge means — the copy, the judgment, and whether the action is allowed all come from the consumer.",
+        "mail": {
+          "title": "Internal mail",
+          "description": "Manage mailboxes, distribution lists, and shared signatures."
+        },
+        "fileShare": {
+          "title": "File sharing",
+          "description": "Handles department folders and external share links."
+        },
+        "dataSync": {
+          "title": "Data integration platform",
+          "description": "Manages data-sync jobs with external systems."
+        },
+        "iam": {
+          "title": "Access management",
+          "description": "Review roles, two-factor authentication policy, and audit events."
+        },
+        "integrations": {
+          "title": "Connected apps",
+          "description": "Configure third-party integration connections and scopes."
+        },
+        "legacyKb": {
+          "title": "Legacy knowledge base",
+          "description": "Keeps operating procedures through fiscal year 2024 in read-only storage."
+        }
+      },
+      "disabledReason": {
+        "heading": "3 · disabledReason · the reason an action doesn't work comes before the action",
+        "why": "A disabled button conveys no 'why' at all. That's why the reason is placed before the action in DOM order (WCAG 2.2 · 1.3.2), and the tile carries data-unavailable so its medallion recedes. disabledReason does not disable the button — that stays the consumer's own Button prop.",
+        "inventory": {
+          "title": "Inventory management",
+          "description": "Manage inventory, stock movements, and physical counts by site.",
+          "reason": "This department's usage request has not been approved yet."
+        },
+        "contracts": {
+          "title": "Contract management",
+          "description": "Handles contract storage, deadline notifications, and e-signature requests.",
+          "reason": "Viewing requires a Legal department role. Apply through the IT help desk."
+        },
+        "analytics": {
+          "title": "Analytics platform",
+          "description": "Provides company-wide dashboards and data marts.",
+          "reason": "This service has been suspended by an organization administrator."
+        }
+      },
+      "loadingCatalog": {
+        "heading": "4 · Loading state and catalog entry",
+        "why": "ServiceLauncherCardSkeleton is the initial placeholder with the same skeleton, requires a label, carries aria-busy, and deliberately never opens a live region. ServiceCatalogCta is the companion tile you place alongside it only when a real additional entry point exists, and it accepts a glyph other than the default Plus.",
+        "skeletonLabel": "Loading service",
+        "addApp": {
+          "title": "Add an app"
+        },
+        "allApps": {
+          "title": "View all internal apps"
+        }
+      },
+      "edgeCases": {
+        "heading": "5 · Touching the edges · a 3-line name, no description, a long hostname that won't break",
+        "why": "A tidy example never shows where a tile breaks. This is the side that breaks: a name that wraps to 3 lines sits next to a 2-word name in the same row, a tile with no description sits beside one that has one, and a hostname with no whitespace tries to stretch the column. If it looks unsightly, this section is doing its job — what has to hold up is the component, not the sample data.",
+        "hrPortal": {
+          "title": "Global HR information platform · Employee self-service portal (Asia-Pacific)",
+          "description": "An integrated workspace that centrally manages HR master data, attendance, payroll, and performance reviews."
+        },
+        "dailyReport": {
+          "title": "Daily report"
+        },
+        "warningConsole": {
+          "title": "Global Workforce Identity & Entitlement Administration Console",
+          "description": "Review pending entitlement requests before the next access certification.",
+          "reason": "Your organization has no approved request for this service yet."
+        }
+      },
+      "minimalTiles": {
+        "heading": "6 · Minimal tiles",
+        "why": "Only icon, title, and action are required. Omit statusLabel and the whole Badge row disappears; omit description and metadata too and the skeleton still holds — compare its height with the fully loaded tile next to it.",
+        "wiki": {
+          "title": "Internal wiki"
+        },
+        "contact": {
+          "title": "Support contact",
+          "description": "Internal system inquiries are accepted here."
+        },
+        "calendar": {
+          "title": "Company-wide calendar",
+          "description": "Shares company-wide events, holidays, and site-specific schedules.",
+          "reason": "Published as read-only."
+        }
+      },
+      "logo": {
+        "heading": "7 · logo · an uploaded logo, and the services that have none",
+        "why": "logo is a URL to an image the administrator uploaded, and it only replaces icon when it actually loads. icon stays required — a freshly created service has no logo, and a service whose URL now 404s has none either. A broken image never enters the DOM. The image box is the same 20px as the glyph (--card-service-launcher-icon-glyph-size), and its aspect ratio is preserved with object-fit: contain.",
+        "uploaded": {
+          "title": "Attendance management",
+          "description": "A service with an uploaded logo. The medallion shows the logo instead of icon."
+        },
+        "missing": {
+          "title": "Attendance management (no logo set)",
+          "description": "The same tile without a logo passed. icon stays as-is, and the medallion size doesn't change either."
+        },
+        "broken": {
+          "title": "Data integration platform (logo 404)",
+          "description": "logo_url is set but the file doesn't exist. The tile doesn't go blank — it falls back to icon."
+        },
+        "wideMark": {
+          "title": "Expense reimbursement",
+          "description": "A wide 240×96 wordmark logo. Because of contain it's never cropped, and the box width stays the same as the glyph's."
+        },
+        "withReason": {
+          "title": "Access management",
+          "description": "logo and disabledReason are orthogonal. State is conveyed by the Badge and the reason text — we never let another company's brand color carry that meaning on our own.",
+          "reason": "Viewing requires an administrator role."
+        },
+        "emptyString": {
+          "title": "Internal mail",
+          "description": "An empty-string logo. It's treated the same as not set, and issues no wasted request either."
+        }
+      }
+    }
   }
 }

package/dist/i18n/messages/ja.json

@@ -1175,5 +1175,172 @@
       "ledgerLabel": "台帳ID",
       "ledgerHelper": "71文字の識別子でも行からはみ出さない"
     }
+  },
+  "serviceLauncherShowcase": {
+    "page": {
+      "title": "ServiceLauncherCard",
+      "subtitle": "社内アプリケーション一覧のタイル — 利用可能・制限・停止・アーカイブ・読み込み中・カタログ導線"
+    },
+    "status": {
+      "available": "利用可能",
+      "active": "稼働中",
+      "maintenance": "メンテナンス中",
+      "stopped": "停止中",
+      "adminOnly": "管理者限定",
+      "preparing": "準備中",
+      "archived": "アーカイブ",
+      "unapplied": "未申請",
+      "noPermission": "権限なし",
+      "attentionRequired": "Attention required"
+    },
+    "action": {
+      "openService": "サービスを開く",
+      "open": "開く",
+      "viewStatus": "状況を見る",
+      "viewHistory": "履歴を見る",
+      "checkPermissions": "権限を確認",
+      "openSettings": "設定を開く",
+      "viewArchive": "アーカイブを見る",
+      "openRequestForm": "申請フォームを開く",
+      "openList": "一覧を開く",
+      "openServiceEnglish": "Open service"
+    },
+    "sections": {
+      "basics": {
+        "heading": "1 · 基本 · 利用できるサービス",
+        "why": "アイコン・名称・ステータス・説明・識別子・操作。ステータスの文言は常に利用側のコピーで、コンポーネントが決めるのは tone に対応する Badge の意味づけだけです。",
+        "attendance": {
+          "title": "勤怠管理",
+          "description": "打刻、シフト、休暇申請を一つのワークスペースで管理します。"
+        },
+        "expense": {
+          "title": "経費精算",
+          "description": "領収書の提出から承認、仕訳連携までを扱います。"
+        },
+        "meetingRoom": {
+          "title": "会議室予約",
+          "description": "拠点ごとの会議室と備品を予約します。"
+        }
+      },
+      "statusTones": {
+        "heading": "2 · statusTone の 6 値すべて",
+        "why": "success / warning / destructive / info / neutral / muted。tone は Badge の意味づけだけを決め、文言・判定・操作の可否はすべて利用側が渡します。",
+        "mail": {
+          "title": "社内メール",
+          "description": "メールボックス、配布リスト、共有署名を管理します。"
+        },
+        "fileShare": {
+          "title": "ファイル共有",
+          "description": "部門フォルダと外部共有リンクを扱います。"
+        },
+        "dataSync": {
+          "title": "データ連携基盤",
+          "description": "外部システムとのデータ同期ジョブを管理します。"
+        },
+        "iam": {
+          "title": "権限管理",
+          "description": "ロール、二要素認証ポリシー、監査イベントを確認します。"
+        },
+        "integrations": {
+          "title": "連携アプリ",
+          "description": "サードパーティ連携の接続とスコープを設定します。"
+        },
+        "legacyKb": {
+          "title": "旧ナレッジベース",
+          "description": "2024 年度までの運用手順を読み取り専用で保管しています。"
+        }
+      },
+      "disabledReason": {
+        "heading": "3 · disabledReason · 操作が効かない理由は操作より先に置かれる",
+        "why": "無効化されたボタンは「なぜ」を一切伝えません。だから理由は DOM 順で操作より先に置かれ（WCAG 2.2 · 1.3.2）、タイルは data-unavailable を帯びてメダリオンが沈みます。disabledReason はボタンを無効化しません — それは利用側の Button prop のままです。",
+        "inventory": {
+          "title": "在庫管理",
+          "description": "拠点別の在庫、入出庫、棚卸を管理します。",
+          "reason": "この部門ではまだ利用申請が承認されていません。"
+        },
+        "contracts": {
+          "title": "契約書管理",
+          "description": "契約書の保管、期限通知、電子署名の依頼を扱います。",
+          "reason": "閲覧には法務部門のロールが必要です。IT ヘルプデスクへ申請してください。"
+        },
+        "analytics": {
+          "title": "分析基盤",
+          "description": "全社ダッシュボードとデータマートを提供します。",
+          "reason": "このサービスは組織の管理者によって停止されています。"
+        }
+      },
+      "loadingCatalog": {
+        "heading": "4 · 読み込み中とカタログ導線",
+        "why": "ServiceLauncherCardSkeleton は同じ骨格の初期プレースホルダーで、label が必須・aria-busy を持ち、ライブリージョンは意図的に開きません。ServiceCatalogCta は実在する追加導線がある場合にだけ並べる相棒タイルで、既定の Plus 以外のグリフも受け取ります。",
+        "skeletonLabel": "サービスを読み込み中",
+        "addApp": {
+          "title": "アプリを追加"
+        },
+        "allApps": {
+          "title": "すべての社内アプリを見る"
+        }
+      },
+      "edgeCases": {
+        "heading": "5 · 端に触れる · 3 行の名称、説明なし、切れない長いホスト名",
+        "why": "整った例はタイルが崩れる場所を何も見せません。ここは崩れる側です：3 行になる名称と 2 語の名称が同じ行に並び、説明のないタイルが説明のあるタイルの隣に置かれ、空白のないホスト名が列幅を広げようとします。見苦しく見えるなら、このセクションは仕事をしています — 耐えるのはサンプルデータではなくコンポーネントの側です。",
+        "hrPortal": {
+          "title": "グローバル人事情報基盤・従業員セルフサービスポータル（アジア太平洋地域）",
+          "description": "人事マスタ、勤怠、給与、評価を一元管理する統合ワークスペースです。"
+        },
+        "dailyReport": {
+          "title": "日報"
+        },
+        "warningConsole": {
+          "title": "Global Workforce Identity & Entitlement Administration Console",
+          "description": "Review pending entitlement requests before the next access certification.",
+          "reason": "Your organization has no approved request for this service yet."
+        }
+      },
+      "minimalTiles": {
+        "heading": "6 · 最小のタイル",
+        "why": "必須は icon・title・action の 3 つだけです。statusLabel を省けば Badge の行ごと消え、description と metadata を省いても骨格は保たれます — 隣の満載のタイルと高さを比べてください。",
+        "wiki": {
+          "title": "社内 Wiki"
+        },
+        "contact": {
+          "title": "問い合わせ窓口",
+          "description": "社内のシステム相談はこちらで受け付けています。"
+        },
+        "calendar": {
+          "title": "全社カレンダー",
+          "description": "全社行事、休業日、拠点別の予定を共有します。",
+          "reason": "読み取り専用で公開されています。"
+        }
+      },
+      "logo": {
+        "heading": "7 · logo · アップロードされたロゴと、それがないサービス",
+        "why": "logo は管理者がアップロードした画像の URL で、読み込めたときだけ icon を置き換えます。icon は必須のままです — 作ったばかりのサービスにはロゴがなく、URL が 404 になったサービスにもロゴはありません。壊れた画像は DOM に入りません。画像の箱はグリフと同じ 20px（--card-service-launcher-icon-glyph-size）で、縦横比は object-fit: contain で保たれます。",
+        "uploaded": {
+          "title": "勤怠管理",
+          "description": "ロゴをアップロード済みのサービス。メダリオンには icon ではなくロゴが出ます。"
+        },
+        "missing": {
+          "title": "勤怠管理（ロゴ未設定）",
+          "description": "同じタイルで logo を渡さない場合。icon がそのまま残り、メダリオンの大きさも変わりません。"
+        },
+        "broken": {
+          "title": "データ連携基盤（ロゴ 404）",
+          "description": "logo_url は入っているのにファイルがない状態。タイルは空にならず icon に戻ります。"
+        },
+        "wideMark": {
+          "title": "経費精算",
+          "description": "240×96 の横長ロゴ。contain なので切り抜かれず、箱の幅もグリフと同じままです。"
+        },
+        "withReason": {
+          "title": "権限管理",
+          "description": "ロゴと disabledReason は直交します。状態を伝えるのは Badge と理由文であって、他社のブランド色をこちらで勝手に転ばしはしません。",
+          "reason": "閲覧には管理者ロールが必要です。"
+        },
+        "emptyString": {
+          "title": "社内メール",
+          "description": "空文字列の logo。未設定と同じ扱いで、無駄なリクエストも発行しません。"
+        }
+      }
+    }
   }
 }

package/dist/i18n/messages/vi.json

@@ -1176,5 +1176,172 @@
       "ledgerLabel": "Mã sổ cái",
       "ledgerHelper": "Định danh 71 ký tự vẫn nằm trong khung"
     }
+  },
+  "serviceLauncherShowcase": {
+    "page": {
+      "title": "ServiceLauncherCard",
+      "subtitle": "Các ô cho danh sách ứng dụng nội bộ của tổ chức — khả dụng, hạn chế, tạm dừng, lưu trữ, đang tải và lối vào danh mục."
+    },
+    "status": {
+      "available": "Khả dụng",
+      "active": "Đang hoạt động",
+      "maintenance": "Đang bảo trì",
+      "stopped": "Đã dừng",
+      "adminOnly": "Chỉ dành cho quản trị viên",
+      "preparing": "Đang chuẩn bị",
+      "archived": "Đã lưu trữ",
+      "unapplied": "Chưa đăng ký",
+      "noPermission": "Không có quyền",
+      "attentionRequired": "Attention required"
+    },
+    "action": {
+      "openService": "Mở dịch vụ",
+      "open": "Mở",
+      "viewStatus": "Xem tình trạng",
+      "viewHistory": "Xem lịch sử",
+      "checkPermissions": "Kiểm tra quyền",
+      "openSettings": "Mở cài đặt",
+      "viewArchive": "Xem lưu trữ",
+      "openRequestForm": "Mở biểu mẫu yêu cầu",
+      "openList": "Mở danh sách",
+      "openServiceEnglish": "Open service"
+    },
+    "sections": {
+      "basics": {
+        "heading": "1 · Cơ bản · các dịch vụ có thể sử dụng",
+        "why": "Biểu tượng, tên, trạng thái, mô tả, định danh, thao tác. Nội dung trạng thái luôn do phía sử dụng cung cấp — component chỉ quyết định ý nghĩa của tone trên Badge.",
+        "attendance": {
+          "title": "Quản lý chấm công",
+          "description": "Quản lý chấm công, ca làm việc và đơn xin nghỉ phép trong một không gian làm việc duy nhất."
+        },
+        "expense": {
+          "title": "Quyết toán chi phí",
+          "description": "Xử lý từ nộp hóa đơn, phê duyệt cho đến đồng bộ với sổ kế toán."
+        },
+        "meetingRoom": {
+          "title": "Đặt phòng họp",
+          "description": "Đặt phòng họp và thiết bị theo từng cơ sở."
+        }
+      },
+      "statusTones": {
+        "heading": "2 · Toàn bộ 6 giá trị statusTone",
+        "why": "success / warning / destructive / info / neutral / muted. Tone chỉ quyết định ý nghĩa của Badge — nội dung, phán đoán và việc thao tác có được phép hay không đều do phía sử dụng cung cấp.",
+        "mail": {
+          "title": "Email nội bộ",
+          "description": "Quản lý hộp thư, danh sách phân phối và chữ ký dùng chung."
+        },
+        "fileShare": {
+          "title": "Chia sẻ tệp",
+          "description": "Xử lý thư mục phòng ban và liên kết chia sẻ ra bên ngoài."
+        },
+        "dataSync": {
+          "title": "Nền tảng tích hợp dữ liệu",
+          "description": "Quản lý các tác vụ đồng bộ dữ liệu với hệ thống bên ngoài."
+        },
+        "iam": {
+          "title": "Quản lý quyền truy cập",
+          "description": "Xem vai trò, chính sách xác thực hai yếu tố và các sự kiện kiểm toán."
+        },
+        "integrations": {
+          "title": "Ứng dụng liên kết",
+          "description": "Cấu hình kết nối và phạm vi cho các tích hợp bên thứ ba."
+        },
+        "legacyKb": {
+          "title": "Cơ sở tri thức cũ",
+          "description": "Lưu trữ ở chế độ chỉ đọc các quy trình vận hành đến hết năm tài chính 2024."
+        }
+      },
+      "disabledReason": {
+        "heading": "3 · disabledReason · lý do thao tác không thực hiện được được đặt trước thao tác",
+        "why": "Một nút bị vô hiệu hóa không truyền tải bất kỳ lý do 'tại sao' nào. Vì vậy lý do được đặt trước thao tác theo thứ tự DOM (WCAG 2.2 · 1.3.2), và ô mang thuộc tính data-unavailable khiến huy hiệu mờ đi. disabledReason không vô hiệu hóa nút — đó vẫn là prop Button do phía sử dụng kiểm soát.",
+        "inventory": {
+          "title": "Quản lý tồn kho",
+          "description": "Quản lý tồn kho, nhập xuất kho và kiểm kê theo từng cơ sở.",
+          "reason": "Yêu cầu sử dụng của phòng ban này vẫn chưa được phê duyệt."
+        },
+        "contracts": {
+          "title": "Quản lý hợp đồng",
+          "description": "Xử lý lưu trữ hợp đồng, thông báo hạn và yêu cầu ký điện tử.",
+          "reason": "Cần có vai trò của bộ phận pháp chế để xem. Vui lòng đăng ký qua bộ phận hỗ trợ IT."
+        },
+        "analytics": {
+          "title": "Nền tảng phân tích",
+          "description": "Cung cấp bảng điều khiển và kho dữ liệu cho toàn công ty.",
+          "reason": "Dịch vụ này đã bị quản trị viên của tổ chức tạm dừng."
+        }
+      },
+      "loadingCatalog": {
+        "heading": "4 · Trạng thái đang tải và lối vào danh mục",
+        "why": "ServiceLauncherCardSkeleton là placeholder ban đầu có cùng khung xương, bắt buộc phải có label, mang aria-busy, và cố ý không mở live region. ServiceCatalogCta là ô đồng hành chỉ đặt cạnh khi thực sự có thêm lối vào, và nó nhận một glyph khác ngoài Plus mặc định.",
+        "skeletonLabel": "Đang tải dịch vụ",
+        "addApp": {
+          "title": "Thêm ứng dụng"
+        },
+        "allApps": {
+          "title": "Xem tất cả ứng dụng nội bộ"
+        }
+      },
+      "edgeCases": {
+        "heading": "5 · Chạm tới giới hạn · tên 3 dòng, không có mô tả, tên máy chủ dài không thể ngắt",
+        "why": "Một ví dụ gọn gàng không bao giờ cho thấy nơi ô bị vỡ. Đây là mặt vỡ đó: một tên phải xuống 3 dòng nằm cạnh một tên chỉ 2 từ trên cùng một hàng, một ô không có mô tả đặt cạnh một ô có mô tả, và một tên máy chủ không có khoảng trắng cố kéo giãn cột. Nếu trông có vẻ xấu xí, tức là phần này đang làm đúng việc của nó — thứ phải chịu được áp lực là component, chứ không phải dữ liệu mẫu.",
+        "hrPortal": {
+          "title": "Nền tảng thông tin nhân sự toàn cầu · Cổng tự phục vụ nhân viên (khu vực châu Á - Thái Bình Dương)",
+          "description": "Không gian làm việc tích hợp quản lý tập trung dữ liệu nhân sự gốc, chấm công, lương và đánh giá."
+        },
+        "dailyReport": {
+          "title": "Báo cáo hằng ngày"
+        },
+        "warningConsole": {
+          "title": "Global Workforce Identity & Entitlement Administration Console",
+          "description": "Review pending entitlement requests before the next access certification.",
+          "reason": "Your organization has no approved request for this service yet."
+        }
+      },
+      "minimalTiles": {
+        "heading": "6 · Ô tối giản",
+        "why": "Chỉ có icon, title và action là bắt buộc. Bỏ statusLabel thì cả hàng Badge biến mất; bỏ cả description và metadata thì khung vẫn được giữ nguyên — hãy so sánh chiều cao với ô đầy đủ bên cạnh.",
+        "wiki": {
+          "title": "Wiki nội bộ"
+        },
+        "contact": {
+          "title": "Đầu mối liên hệ hỗ trợ",
+          "description": "Nơi tiếp nhận các thắc mắc về hệ thống nội bộ."
+        },
+        "calendar": {
+          "title": "Lịch toàn công ty",
+          "description": "Chia sẻ sự kiện toàn công ty, ngày nghỉ và lịch theo từng cơ sở.",
+          "reason": "Được công khai ở chế độ chỉ đọc."
+        }
+      },
+      "logo": {
+        "heading": "7 · logo · logo đã tải lên, và những dịch vụ chưa có logo",
+        "why": "logo là URL của một hình ảnh do quản trị viên tải lên, và nó chỉ thay thế icon khi tải thành công. icon vẫn là bắt buộc — một dịch vụ vừa tạo chưa có logo, và một dịch vụ có URL trả về 404 cũng không có logo. Một hình ảnh bị lỗi sẽ không bao giờ vào DOM. Khung hình ảnh có cùng kích thước 20px với glyph (--card-service-launcher-icon-glyph-size), và tỉ lệ khung hình được giữ nguyên nhờ object-fit: contain.",
+        "uploaded": {
+          "title": "Quản lý chấm công",
+          "description": "Dịch vụ đã tải lên logo. Huy hiệu hiển thị logo thay vì icon."
+        },
+        "missing": {
+          "title": "Quản lý chấm công (chưa đặt logo)",
+          "description": "Cùng một ô nhưng không truyền logo. icon vẫn giữ nguyên, và kích thước huy hiệu cũng không đổi."
+        },
+        "broken": {
+          "title": "Nền tảng tích hợp dữ liệu (logo lỗi 404)",
+          "description": "logo_url đã được đặt nhưng tệp không tồn tại. Ô không bị trống mà quay về dùng icon."
+        },
+        "wideMark": {
+          "title": "Quyết toán chi phí",
+          "description": "Logo dạng chữ nằm ngang 240×96. Vì dùng contain nên không bị cắt xén, và chiều rộng khung vẫn giữ nguyên như glyph."
+        },
+        "withReason": {
+          "title": "Quản lý quyền truy cập",
+          "description": "logo và disabledReason là hai trục độc lập. Trạng thái được truyền tải qua Badge và văn bản lý do — chúng ta không tự ý để màu thương hiệu của bên khác gánh vai trò đó.",
+          "reason": "Cần có vai trò quản trị viên để xem."
+        },
+        "emptyString": {
+          "title": "Email nội bộ",
+          "description": "logo là chuỗi rỗng. Được xử lý giống như chưa đặt, và cũng không phát sinh yêu cầu thừa."
+        }
+      }
+    }
   }
 }

package/dist/lib/image-loading-status.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+/**
+ * THE ONE image-load probe in this library — do not write a second one.
+ *
+ * It was born inside `Avatar` (a mark with an initials fallback) and was lifted out whole when
+ * `ServiceLauncherCard` needed exactly the same question answered for an uploaded service logo
+ * (gh#850). Two components asking "did this URL actually produce a picture?" must not answer it
+ * two different ways, or the failure path diverges where nobody looks: on the 404.
+ *
+ * React Aria has no avatar, so this is hand-built — but the part worth building is not a `<span>`
+ * wrapper, it is the rule `@radix-ui/react-avatar` holds: the image is drawn ONLY once it has
+ * finished loading, and the fallback is drawn while it has not, or has failed.
+ *
+ * The probe is a DETACHED `new Image()`, not `onLoad`/`onError` on the element being rendered: that
+ * element only exists once the status is already `loaded`, so a handler on it can never report
+ * "loading" or "error". It is also why a broken `<img>` is never in the DOM for the browser to
+ * paint its torn-page glyph over the fallback.
+ */
+export type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
+export declare function useImageLoadingStatus(src: string | undefined, { loadingStatus, setLoadingStatus, referrerPolicy, crossOrigin, }: {
+    loadingStatus: ImageLoadingStatus;
+    setLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;
+    referrerPolicy?: React.HTMLAttributeReferrerPolicy;
+    crossOrigin?: "anonymous" | "use-credentials" | "";
+}): ImageLoadingStatus;

package/dist/lib/image-loading-status.js

@@ -0,0 +1,41 @@
+"use client";
+import { useLayoutEffect } from "@react-aria/utils";
+function getImageLoadingStatus(image) {
+  if (!image.complete) {
+    return "loading";
+  }
+  return image.naturalWidth > 0 ? "loaded" : "error";
+}
+function useImageLoadingStatus(src, {
+  loadingStatus,
+  setLoadingStatus,
+  referrerPolicy,
+  crossOrigin
+}) {
+  useLayoutEffect(() => {
+    if (!src) {
+      setLoadingStatus("error");
+      return;
+    }
+    const image = new window.Image();
+    const handleLoad = (event) => setLoadingStatus(getImageLoadingStatus(event.currentTarget));
+    const handleError = () => setLoadingStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    image.crossOrigin = crossOrigin ?? null;
+    image.src = src;
+    setLoadingStatus(getImageLoadingStatus(image));
+    return () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+      setLoadingStatus("idle");
+    };
+  }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
+  return loadingStatus;
+}
+export {
+  useImageLoadingStatus
+};