@godxjp/ui 31.27.0 → 31.28.1

package/docs/i18n/messages/vi.json

@@ -1615,5 +1615,21 @@
       "setup": "Cài đặt",
       "release": "Các bước phát hành"
     }
+  },
+  "pageCoverDocs": {
+    "title": "Ghi chú kế hoạch quý",
+    "icon": "Biểu tượng trang",
+    "reposition": "Chỉnh vị trí",
+    "done": "Xong",
+    "body": "Khi đang chỉnh vị trí, kéo ảnh bìa hoặc dùng phím mũi tên; bấm biểu tượng để mở bộ chọn emoji.",
+    "position": "Tiêu điểm: {value}% tính từ trên"
+  },
+  "emojiPickerDocs": {
+    "subtitle": "Tìm theo ngôn ngữ · danh mục · dùng gần đây · điều khiển bằng bàn phím",
+    "title": "Chọn biểu tượng trang",
+    "description": "Gõ từ khoá theo ngôn ngữ hiện tại hoặc duyệt danh mục. Phím mũi tên để di chuyển, Enter để chọn.",
+    "label": "Biểu tượng",
+    "chosen": "Đã chọn: {icon}",
+    "none": "Không có biểu tượng"
   }
 }

package/docs/layout/page-cover.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Prose } from "@godxjp/ui/data-display";
+import { EmojiPicker } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { PageContainer, PageCover } from "@godxjp/ui/layout";
+
+import shot from "../assets/shot-landscape.svg";
+
+/**
+ * PageCover + PageContainer `icon` / headerScale="display" (gh#1160) — a Notion / note.com page:
+ * a banner cover you can reposition (drag, or the arrow keys while repositioning), the page icon
+ * over its edge (chosen with EmojiPicker), and the article's display-size title.
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  const [y, setY] = React.useState(40);
+  const [moving, setMoving] = React.useState(false);
+  const [icon, setIcon] = React.useState<string | null>("📘");
+  return (
+    <PageContainer
+      title={t("pageCoverDocs.title")}
+      headerScale="display"
+      icon={
+        <EmojiPicker
+          value={icon}
+          onValueChange={setIcon}
+          size="lg"
+          aria-label={t("pageCoverDocs.icon")}
+        />
+      }
+      cover={
+        <PageCover
+          src={shot}
+          alt=""
+          positionY={y}
+          onPositionChange={setY}
+          repositioning={moving}
+          onRepositioningChange={setMoving}
+          actions={
+            <Button size="sm" variant="secondary" onClick={() => setMoving((m) => !m)}>
+              {moving ? t("pageCoverDocs.done") : t("pageCoverDocs.reposition")}
+            </Button>
+          }
+        />
+      }
+    >
+      <Prose measure="medium">
+        <p>{t("pageCoverDocs.body")}</p>
+      </Prose>
+      <Text size="sm" tone="muted">
+        {t("pageCoverDocs.position", { value: y })}
+      </Text>
+    </PageContainer>
+  );
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.27.0",
-  "godxUiMcp": "31.27.0",
+  "version": "31.28.1",
+  "godxUiMcp": "31.28.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -438,7 +438,6 @@
     "check:frame-token-scope": "node scripts/check-frame-token-scope.mjs"
   },
   "peerDependencies": {
-    "@hookform/resolvers": "^5.2.0",
     "@tanstack/react-query": ">=5.0.0",
     "playwright": "*",
     "react": ">=19.0.0",
@@ -450,9 +449,6 @@
     "zod": "^4.4.0"
   },
   "peerDependenciesMeta": {
-    "@hookform/resolvers": {
-      "optional": true
-    },
     "@tanstack/react-query": {
       "optional": true
     },
@@ -483,6 +479,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "emojibase-data": "^17.0.0",
     "input-otp": "^1.5.0",
     "lucide-react": "^1.37.0",
     "qrcode.react": "4.2.0",
@@ -546,11 +543,13 @@
     "jsqr": "^1.4.0",
     "mdast-util-directive": "^3.1.1",
     "mdast-util-from-markdown": "^2.1.0",
+    "mdast-util-frontmatter": "^2.0.1",
     "mdast-util-gfm": "^3.1.0",
     "mdast-util-to-markdown": "^2.2.0",
     "mermaid": "^11.17.2",
     "micromark-extension-cjk-friendly": "^2.0.2",
     "micromark-extension-directive": "^4.0.0",
+    "micromark-extension-frontmatter": "^2.0.0",
     "micromark-extension-gfm": "^3.0.0",
     "micromark-util-types": "^2.0.3",
     "playwright": "^1.62.1",