@godxjp/ui 31.28.4 → 31.30.0

package/docs/i18n/messages/ja.json

@@ -1631,5 +1631,67 @@
     "label": "アイコン",
     "chosen": "選択中: {icon}",
     "none": "アイコンなし"
+  },
+  "dialogWidthDocs": {
+    "title": "幅の広いダイアログ（width）",
+    "description": "DialogContent の width で一覧グリッド向けに幅を広げます。画面幅から余白を引いた幅が上限なので、スマートフォンでもはみ出しません。",
+    "open": "一覧を開く",
+    "dialogTitle": "すべてのデスクトップ",
+    "dialogDescription": "3 列のグリッドを収めた 60rem のダイアログです。",
+    "desktop": "デスクトップ {n}"
+  },
+  "sortableListDocs": {
+    "subtitle": "つまみをドラッグ、または Space・矢印・Space・Esc — 移動のたびに読み上げます",
+    "widgetsTitle": "ホームのウィジェット",
+    "widgetsDescription": "デスクトップのタイルを並べ替えます。順序は置いたときに一度だけ保存されます。",
+    "calendar": "カレンダー",
+    "mail": "メール",
+    "tasks": "タスク",
+    "notes": "メモ",
+    "slot": "{position} 番目",
+    "saved": "保存された順序: {order}",
+    "tabsTitle": "プロジェクトのタブ",
+    "tabsDescription": "リスト表示です。請求はプランで固定されているため持ち上げられませんが、ほかの項目はその前後に移動できます。",
+    "overview": "概要",
+    "members": "メンバー",
+    "billing": "請求",
+    "audit": "監査ログ"
+  },
+  "topbarItemDocs": {
+    "notifications": "通知",
+    "notificationsUnread": "通知（未読 {count} 件）"
+  },
+  "appLauncherDocs": {
+    "requestAccess": "アクセスをリクエスト",
+    "allApps": "すべてのアプリ"
+  },
+  "responsiveGridDocs": {
+    "boardTitle": "ウィジェットボード（rowSpan + dense）",
+    "boardDescription": "2×1 のセル、縦長 1×2 のセル（ResponsiveGrid.Item rowSpan={2}）、1×1 のセル。dense で小さなセルが横長・縦長セルの隣の空きを埋めます。",
+    "revenue": "月次売上",
+    "tasks": "未完了タスク",
+    "members": "メンバー",
+    "invoices": "請求書",
+    "services": "サービス",
+    "invitations": "招待"
+  },
+  "avatarDocs": {
+    "fitTitle": "ロゴ：fit=\"contain\"",
+    "fitDescription": "cover（既定）は枠いっぱいに切り抜きます（顔写真向け）。contain は横長・透過のロゴを切らずに全体表示します。",
+    "logo": "Acme ロゴ"
+  },
+  "sidebarDocs": {
+    "newEntry": "仕訳を追加"
+  },
+  "rangeTimelineDocs": {
+    "resizeTitle": "ラベル列の幅変更・読み込み中・日付なしの行",
+    "resizeDescription": "ヘッダーの区切りをドラッグ（またはフォーカスして矢印キー、Shiftで大きく、Home/End）するとラベル列の幅が変わります。幅は制御プロパティなので、アプリ側でユーザーごとに保存できます。スイッチは新しい期間の読み込み中を示し、日付のない行はバーの代わりに案内を表示します。",
+    "busyToggle": "新しい期間を読み込み中",
+    "longTask": "EXSELI-81 問い合わせフォームと確認メールの改修",
+    "undatedTask": "EXSELI-82 まだ日程未定",
+    "width": "ラベル列: {width}px",
+    "doneTask": "EXSELI-79 リリースノート（完了）",
+    "lateTask": "EXSELI-80 データ移行（期限超過）",
+    "plannedTask": "EXSELI-84 決済API（予定 3–7、実績 3–10）"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1631,5 +1631,67 @@
     "label": "Biểu tượng",
     "chosen": "Đã chọn: {icon}",
     "none": "Không có biểu tượng"
+  },
+  "dialogWidthDocs": {
+    "title": "Hộp thoại rộng (width)",
+    "description": "width của DialogContent nới rộng bảng cho một lưới tổng quan; bị giới hạn bằng chiều rộng màn hình trừ lề, nên vẫn vừa điện thoại.",
+    "open": "Mở tổng quan",
+    "dialogTitle": "Tất cả màn hình làm việc",
+    "dialogDescription": "Hộp thoại 60rem chứa một lưới ba cột.",
+    "desktop": "Màn hình {n}"
+  },
+  "sortableListDocs": {
+    "subtitle": "Kéo tay nắm, hoặc Space · mũi tên · Space · Esc — mỗi lần di chuyển đều được đọc",
+    "widgetsTitle": "Widget trang chủ",
+    "widgetsDescription": "Sắp xếp các ô trên màn hình. Thứ tự được lưu một lần khi bạn thả.",
+    "calendar": "Lịch",
+    "mail": "Thư",
+    "tasks": "Công việc",
+    "notes": "Ghi chú",
+    "slot": "Ô {position}",
+    "saved": "Thứ tự đã lưu: {order}",
+    "tabsTitle": "Tab dự án",
+    "tabsDescription": "Dạng danh sách. Thanh toán bị khoá theo gói nên không nhấc được — các mục khác vẫn di chuyển qua nó.",
+    "overview": "Tổng quan",
+    "members": "Thành viên",
+    "billing": "Thanh toán",
+    "audit": "Nhật ký kiểm tra"
+  },
+  "topbarItemDocs": {
+    "notifications": "Thông báo",
+    "notificationsUnread": "Thông báo, {count} chưa đọc"
+  },
+  "appLauncherDocs": {
+    "requestAccess": "Yêu cầu quyền truy cập",
+    "allApps": "Tất cả ứng dụng"
+  },
+  "responsiveGridDocs": {
+    "boardTitle": "Bảng widget (rowSpan + dense)",
+    "boardDescription": "Một ô 2×1, một ô cao 1×2 (ResponsiveGrid.Item rowSpan={2}) và các ô 1×1. dense cho các ô nhỏ lấp chỗ trống cạnh ô rộng và ô cao.",
+    "revenue": "Doanh thu tháng",
+    "tasks": "Công việc đang mở",
+    "members": "Thành viên",
+    "invoices": "Hoá đơn",
+    "services": "Dịch vụ",
+    "invitations": "Lời mời"
+  },
+  "avatarDocs": {
+    "fitTitle": "Logo: fit=\"contain\"",
+    "fitDescription": "cover (mặc định) cắt cho đầy khung — hợp với ảnh khuôn mặt. contain hiện trọn logo rộng hoặc trong suốt.",
+    "logo": "Logo Acme"
+  },
+  "sidebarDocs": {
+    "newEntry": "Thêm bút toán"
+  },
+  "rangeTimelineDocs": {
+    "resizeTitle": "Cột nhãn đổi độ rộng, đang tải, hàng chưa có ngày",
+    "resizeDescription": "Kéo vạch ngăn ở header (hoặc focus rồi dùng phím mũi tên, Shift để bước lớn, Home/End) để mở rộng cột nhãn. Độ rộng là prop controlled nên app có thể lưu theo từng người dùng. Công tắc đánh dấu đang tải khoảng mới; hàng chưa có ngày hiện gợi ý thay cho thanh.",
+    "busyToggle": "Đang tải khoảng mới",
+    "longTask": "EXSELI-81 Làm lại form liên hệ và email xác nhận",
+    "undatedTask": "EXSELI-82 Chưa lên lịch",
+    "width": "Cột nhãn: {width}px",
+    "doneTask": "EXSELI-79 Ghi chú phát hành (xong)",
+    "lateTask": "EXSELI-80 Chuyển dữ liệu (quá hạn)",
+    "plannedTask": "EXSELI-84 API thanh toán (kế hoạch 3–7, thực tế 3–10)"
   }
 }

package/docs/layout/app-launcher.tsx

@@ -11,6 +11,7 @@ import {
   ResponsiveGrid,
   Topbar,
 } from "@godxjp/ui/layout";
+import { useTranslation } from "@godxjp/ui/i18n";
 
 const apps = [
   { id: "console", name: "Console", href: "/console", icon: <BarChart3 />, current: true },
@@ -62,6 +63,7 @@ const labels: AppLauncherLabels = {
  *   width (the Slack shape). Shipping both puts one scope in two places.
  */
 export default function Demo() {
+  const { t } = useTranslation();
   const [error, setError] = useState<string | undefined>("アプリ一覧を取得できませんでした。");
 
   return (
@@ -82,7 +84,21 @@ export default function Demo() {
             <Flex direction="col" gap="md">
               <Topbar
                 start={<Text weight="medium">Acme Console</Text>}
-                end={<AppLauncher apps={apps} groups={groups} labels={labels} />}
+                end={
+                  <AppLauncher
+                    apps={apps}
+                    groups={groups}
+                    labels={labels}
+                    footer={
+                      <>
+                        <a href="#app-launcher-request-access">
+                          {t("appLauncherDocs.requestAccess")}
+                        </a>
+                        <a href="#app-launcher-all-apps">{t("appLauncherDocs.allApps")}</a>
+                      </>
+                    }
+                  />
+                }
               />
               <Text size="sm" tone="muted">
                 current のアプリだけが `aria-current=&quot;page&quot;` を持ちます。

package/docs/layout/responsive-grid.tsx

@@ -17,6 +17,7 @@ import {
 } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";
+import { useTranslation } from "@godxjp/ui/i18n";
 
 /**
  * ResponsiveGrid · equal-width multi-column tile grid with automatic responsive
@@ -44,6 +45,7 @@ const KANBAN_TASKS: { id: string; title: string; lane: KanbanLane; priority: str
 ];
 
 export default function Demo() {
+  const { t } = useTranslation();
   // Kanban: which lane each card is in, moved by native drag and drop.
   const [tasks, setTasks] = useState(KANBAN_TASKS);
   const moveTask = (id: string, lane: KanbanLane) =>
@@ -54,6 +56,27 @@ export default function Demo() {
       subtitle="等幅タイルグリッド · KPI・カード比較・ダッシュボード行"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("responsiveGridDocs.boardTitle")}</CardTitle>
+            <CardDescription>{t("responsiveGridDocs.boardDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {/* gh#1175: a widget board — 2×1, 1×2 (rowSpan) and 1×1 cells, packed dense. */}
+            <ResponsiveGrid columns={4} dense>
+              <ResponsiveGrid.Item span={2}>
+                <StatCard label={t("responsiveGridDocs.revenue")} value="¥12,400,000" />
+              </ResponsiveGrid.Item>
+              <ResponsiveGrid.Item rowSpan={2}>
+                <StatCard label={t("responsiveGridDocs.tasks")} value="18" />
+              </ResponsiveGrid.Item>
+              <StatCard label={t("responsiveGridDocs.members")} value="14" />
+              <StatCard label={t("responsiveGridDocs.invoices")} value="2" />
+              <StatCard label={t("responsiveGridDocs.services")} value="3" />
+              <StatCard label={t("responsiveGridDocs.invitations")} value="0" />
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>Compact mobile metrics</CardTitle>

package/docs/layout/sidebar.tsx

@@ -23,6 +23,8 @@ import {
   CardTitle,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@godxjp/ui/feedback";
+import { useTranslation } from "@godxjp/ui/i18n";
 import {
   LayoutDashboard,
   FileText,
@@ -207,6 +209,7 @@ const COMPOSED_ITEMS: SidebarItemData[] = [
 ];
 
 export default function Demo() {
+  const { t } = useTranslation();
   const [activeId, setActiveId] = useState("journal");
   const [collapsed, setCollapsed] = useState(false);
   const [brandActiveId, setBrandActiveId] = useState("projects");
@@ -235,6 +238,27 @@ export default function Demo() {
        * を読むと、AppShell が同じ Sidebar をドロワーにも渡す（ドロワーは展開表示に戻す）ため
        * 全幅のドロワーの中でアイコンだけの足元になります。
        */
+      /*
+       * action · the rail's ONE primary action (gh#1185), above the scrolling nav. Full width
+       * when expanded; icon-only with a tooltip in the collapsed rail.
+       */
+      action={(railCollapsed) =>
+        railCollapsed ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button size="sm" aria-label={t("sidebarDocs.newEntry")}>
+                <Plus />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">{t("sidebarDocs.newEntry")}</TooltipContent>
+          </Tooltip>
+        ) : (
+          <Button size="sm" fullWidth>
+            <Plus />
+            {t("sidebarDocs.newEntry")}
+          </Button>
+        )
+      }
       footer={(railCollapsed) =>
         railCollapsed ? (
           <Flex justify="center">

package/docs/layout/topbar-item.tsx

@@ -11,6 +11,7 @@ import {
 } from "@godxjp/ui/data-display";
 import { Button, Icon, Text } from "@godxjp/ui/general";
 import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
+import { useTranslation } from "@godxjp/ui/i18n";
 import type { SidebarSectionProp } from "@godxjp/ui/layout";
 import {
   DropdownMenu,
@@ -51,6 +52,7 @@ const SECTIONS: SidebarSectionProp[] = [
 ];
 
 export default function Demo() {
+  const { t } = useTranslation();
   const [collapsed, setCollapsed] = useState(false);
 
   return (
@@ -199,6 +201,15 @@ export default function Demo() {
                     <TopbarItem asChild icon={<Target aria-hidden="true" />}>
                       <a href="#topbar-item-goals">目標</a>
                     </TopbarItem>
+                    {/* gh#1171: a bell that is a LINK keeps its count under asChild. */}
+                    <TopbarItem asChild badge={3} icon={<Bell aria-hidden="true" />}>
+                      <a
+                        href="#topbar-item-notifications"
+                        aria-label={t("topbarItemDocs.notificationsUnread", { count: 3 })}
+                      >
+                        {t("topbarItemDocs.notifications")}
+                      </a>
+                    </TopbarItem>
                     <TopbarItem
                       asChild
                       icon={<Target aria-hidden="true" />}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.28.4",
-  "godxUiMcp": "31.28.4",
+  "version": "31.30.0",
+  "godxUiMcp": "31.30.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",