@godxjp/ui 31.28.3 → 31.29.0

package/docs/feedback/dialog.tsx

@@ -21,7 +21,8 @@ import {
   CardTitle,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import { useTranslation } from "@godxjp/ui/i18n";
 
 /** Every branch of DialogHeader's `tone`, in the order the vocabulary declares them. */
 const headerTones = [
@@ -49,6 +50,8 @@ const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY"
  * Use DialogFooter for primary/cancel actions.
  */
 export default function Demo() {
+  const { t } = useTranslation();
+  const [wideOpen, setWideOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(true);
   const [detailOpen, setDetailOpen] = useState(false);
   const [toneOpen, setToneOpen] = useState(false);
@@ -128,6 +131,39 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("dialogWidthDocs.title")}</CardTitle>
+            <CardDescription>{t("dialogWidthDocs.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Dialog open={wideOpen} onOpenChange={setWideOpen}>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                  {t("dialogWidthDocs.open")}
+                </Button>
+              </DialogTrigger>
+              <DialogContent width="60rem">
+                <DialogHeader>
+                  <DialogTitle>{t("dialogWidthDocs.dialogTitle")}</DialogTitle>
+                  <DialogDescription>{t("dialogWidthDocs.dialogDescription")}</DialogDescription>
+                </DialogHeader>
+                <DialogBody>
+                  <ResponsiveGrid columns={{ base: 1, sm: 3 }}>
+                    {[1, 2, 3, 4, 5, 6].map((n) => (
+                      <Card key={n}>
+                        <CardContent>
+                          <Text>{t("dialogWidthDocs.desktop", { n: String(n) })}</Text>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </ResponsiveGrid>
+                </DialogBody>
+              </DialogContent>
+            </Dialog>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Read-only detail pop-up</CardTitle>

package/docs/i18n/messages/en.json

@@ -1638,5 +1638,56 @@
     "label": "Icon",
     "chosen": "Chosen: {icon}",
     "none": "No icon"
+  },
+  "dialogWidthDocs": {
+    "title": "Wide dialog (width)",
+    "description": "DialogContent width sizes the panel for an overview grid; it is capped at the viewport minus the inset, so it still fits a phone.",
+    "open": "Open the overview",
+    "dialogTitle": "All desktops",
+    "dialogDescription": "A 60rem dialog holding a three-column grid.",
+    "desktop": "Desktop {n}"
+  },
+  "sortableListDocs": {
+    "subtitle": "Drag a grip, or Space · arrows · Space · Esc — every move is announced",
+    "widgetsTitle": "Home widgets",
+    "widgetsDescription": "Order the tiles on your desktop. The order is saved once, when you drop.",
+    "calendar": "Calendar",
+    "mail": "Mail",
+    "tasks": "Tasks",
+    "notes": "Notes",
+    "slot": "Slot {position}",
+    "saved": "Saved order: {order}",
+    "tabsTitle": "Project tabs",
+    "tabsDescription": "A list layout. Billing is locked by your plan, so it cannot be picked up — the others still move past it.",
+    "overview": "Overview",
+    "members": "Members",
+    "billing": "Billing",
+    "audit": "Audit log"
+  },
+  "topbarItemDocs": {
+    "notifications": "Notifications",
+    "notificationsUnread": "Notifications, {count} unread"
+  },
+  "appLauncherDocs": {
+    "requestAccess": "Request access",
+    "allApps": "All apps"
+  },
+  "responsiveGridDocs": {
+    "boardTitle": "Widget board (rowSpan + dense)",
+    "boardDescription": "A 2×1 cell, a tall 1×2 cell (ResponsiveGrid.Item rowSpan={2}) and 1×1 cells. dense lets the small cells fill the space beside the wide and tall ones.",
+    "revenue": "Monthly revenue",
+    "tasks": "Open tasks",
+    "members": "Members",
+    "invoices": "Invoices",
+    "services": "Services",
+    "invitations": "Invitations"
+  },
+  "avatarDocs": {
+    "fitTitle": "Logos: fit=\"contain\"",
+    "fitDescription": "cover (the default) crops to fill — right for a face. contain shows a wide or transparent logo whole.",
+    "logo": "Acme logo"
+  },
+  "sidebarDocs": {
+    "newEntry": "New journal entry"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1631,5 +1631,56 @@
     "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": "仕訳を追加"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1631,5 +1631,56 @@
     "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"
   }
 }

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.3",
-  "godxUiMcp": "31.28.3",
+  "version": "31.29.0",
+  "godxUiMcp": "31.29.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",