@godxjp/ui 31.27.0 → 31.28.0

package/dist/props/registry.js

@@ -807,7 +807,17 @@ const COMPONENT_PROP_REGISTRY = {
       {
         field: "headerScale",
         local: true,
-        reason: "What the page's top row IS \u2014 a document title or the surface's own chrome (document | chrome) \u2014 which selects the title's type step via --page-title-font-size-chrome AND opens the page flush with the frame via --page-pad-block-start-chrome (chrome sits on the edge; a document title gets the page's top margin). A fourth orthogonal axis: PageContainerVariantProp owns chrome WEIGHT (ghost drops the divider and header pad), headerLayout owns the header ARRANGEMENT, measure owns the inline cap; none of them can say that the h1 is a channel name rather than a headline."
+        reason: "What the page's top row IS \u2014 a document title, the surface's own chrome, or an article headline (document | chrome | display; display = gh#1160) \u2014 which selects the title's type step via --page-title-font-size-chrome AND opens the page flush with the frame via --page-pad-block-start-chrome (chrome sits on the edge; a document title gets the page's top margin). A fourth orthogonal axis: PageContainerVariantProp owns chrome WEIGHT (ghost drops the divider and header pad), headerLayout owns the header ARRANGEMENT, measure owns the inline cap; none of them can say that the h1 is a channel name rather than a headline."
+      },
+      {
+        field: "icon",
+        local: true,
+        reason: "The PAGE's icon (an emoji or glyph) drawn large above the h1 and over a banner cover's edge \u2014 a page identity slot, not the small IconProp glyph a control carries (gh#1160)."
+      },
+      {
+        field: "cover",
+        local: true,
+        reason: "Slot for a PageCover; the container reads its variant to place it full-bleed above the header (banner) or in the reading column (eyecatch) (gh#1160)."
       },
       {
         field: "measure",
@@ -1263,6 +1273,53 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  PageCoverVariantProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  PageCoverHeightProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  PageCoverProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "IdProp",
+      "ClassNameProp",
+      { field: "src", local: true, reason: "The native img src attribute." },
+      { field: "alt", local: true, reason: "The native img alt attribute." },
+      {
+        field: "positionY",
+        local: true,
+        reason: "The cover's vertical FOCAL POINT, 0\u2013100, applied as object-position y \u2014 a geometric value of this image, not a ValueProp a form submits (gh#1160)."
+      },
+      {
+        field: "onPositionChange",
+        local: true,
+        reason: "Paired change handler of positionY, named after the value it reports (drag / slider keys)."
+      },
+      {
+        field: "repositioning",
+        local: true,
+        reason: "Controlled MODE flag: while true the image is a vertical WAI-ARIA slider. Not OpenProp \u2014 nothing opens; the cover becomes a control."
+      },
+      {
+        field: "onRepositioningChange",
+        local: true,
+        reason: "Paired change handler of repositioning, called when Enter / Escape ends the mode from inside."
+      },
+      {
+        field: "variant",
+        local: true,
+        reason: "PageCoverVariantProp (banner | eyecatch) \u2014 WHERE the cover sits and its shape, not a tone or a visual style variant."
+      },
+      {
+        field: "height",
+        local: true,
+        reason: "PageCoverHeightProp (md | lg) \u2014 the banner's token-owned viewport-scaled height step; SizeProp means control density, not this."
+      },
+      {
+        field: "actions",
+        local: true,
+        reason: "Slot for the host's cover controls (change / reposition / remove), laid out off the focal area \u2014 a ReactNode slot, not the ActionsProp item list."
+      }
+    ]
+  },
   ErrorSurfaceProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -3860,6 +3917,38 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  EmojiPickerProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "OpenProp",
+      "DefaultOpenProp",
+      "OnOpenChangeProp",
+      "SizeProp",
+      "DisabledProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "removable",
+        local: true,
+        reason: `Whether "remove icon" is offered while a value is set \u2014 a picker for an OPTIONAL icon (gh#1164), not AllowClearProp's inline \u2715 on a field.`
+      },
+      {
+        field: "recentsKey",
+        local: true,
+        reason: "localStorage key the per-user recents are kept under, so two pickers (page icons, reactions) can keep separate lists."
+      },
+      {
+        field: "trigger",
+        local: true,
+        reason: "Replaces the default trigger button (a page icon drawn large, a reaction chip) \u2014 a ReactNode slot, not a TriggerProp mode."
+      },
+      { field: "aria-label", local: true, reason: "Accessible name of the trigger and the popover." }
+    ]
+  },
   TreeProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
@@ -3871,6 +3960,11 @@ const COMPONENT_PROP_REGISTRY = {
       "SizeProp",
       "ClassNameProp",
       "IdProp",
+      {
+        field: "expandAction",
+        local: true,
+        reason: "antd DirectoryTree's `expandAction` (false | click | doubleClick): whether a ROW click / double click also toggles a parent's expansion, beside the switcher (gh#1162). An interaction mode of the tree, not an OpenProp."
+      },
       {
         field: "divided",
         local: true,

package/dist/styles/control.css

@@ -991,6 +991,87 @@
     min-width: 0;
   }
 
+  .ui-emoji-picker {
+    --popover-surface-inline-size: var(--emoji-picker-panel-inline-size);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .ui-emoji-picker-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .ui-emoji-picker-head > :first-child {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .ui-emoji-picker-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-0-5, var(--space-1));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+    padding-block-end: var(--space-1);
+  }
+
+  .ui-emoji-picker-tabs [data-state="active"] {
+    background-color: hsl(var(--accent));
+  }
+
+  .ui-emoji-picker-grid {
+    display: flex;
+    flex-direction: column;
+    max-block-size: var(--emoji-picker-grid-max-block-size);
+    overflow-y: auto;
+  }
+
+  .ui-emoji-picker-row {
+    display: grid;
+    grid-template-columns: repeat(8, var(--emoji-picker-cell-size));
+  }
+
+  .ui-emoji-picker-cell {
+    display: grid;
+    place-items: center;
+    inline-size: var(--emoji-picker-cell-size);
+    block-size: var(--emoji-picker-cell-size);
+    border-radius: calc(var(--radius) / var(--radius-ratio));
+    font-size: var(--emoji-picker-glyph-size);
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .ui-emoji-picker-cell:hover,
+  .ui-emoji-picker-cell[aria-selected="true"] {
+    background-color: hsl(var(--accent));
+  }
+
+  .ui-emoji-picker-state {
+    padding-block: var(--space-4);
+    text-align: center;
+  }
+
+  .ui-emoji-picker-trigger[data-has-value] {
+    font-size: var(--emoji-picker-glyph-size);
+  }
+
+  .ui-command-palette-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--menu-icon-size);
+    line-height: 1;
+  }
+
+  .ui-command-palette-icon svg {
+    inline-size: var(--menu-icon-size);
+    block-size: var(--menu-icon-size);
+  }
+
   .ui-command-palette-label {
     min-width: 0;
   }

package/dist/styles/data-display-layout.css

@@ -1506,6 +1506,23 @@
     padding-inline-start: var(--block-editor-gutter-inline-size);
   }
 
+  .ui-block-editor[data-appearance="framed"] {
+    padding-block: var(--block-editor-frame-padding);
+    padding-inline-end: var(--block-editor-frame-padding);
+    border: var(--stroke-hairline) solid hsl(var(--input));
+    border-radius: var(--control-radius, var(--radius));
+    background-color: hsl(var(--background));
+    transition: border-color var(--duration-fast);
+  }
+
+  .ui-block-editor[data-appearance="framed"]:focus-within {
+    border-color: hsl(var(--ring));
+  }
+
+  .ui-block-editor[data-appearance="framed"][data-disabled] {
+    background-color: hsl(var(--muted));
+  }
+
   .ui-block-editor-content {
     min-block-size: var(--block-editor-min-height);
     outline: none;
@@ -1648,6 +1665,83 @@
     margin-block-start: var(--space-2);
   }
 
+  .ui-block-editor-callout-head,
+  .ui-block-editor-columns-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1);
+    margin-block-end: var(--space-2);
+  }
+
+  .ui-block-editor-callout-title {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-block-editor-columns {
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-block-editor-columns-content > [data-node-view-content-react] {
+    display: flex;
+    gap: var(--prose-columns-gap);
+  }
+
+  @media (width < 40rem) {
+    .ui-block-editor-columns-content > [data-node-view-content-react] {
+      flex-direction: column;
+    }
+  }
+
+  .ui-block-editor-content [data-type="details"] {
+    display: flex;
+    gap: var(--space-1);
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-block-editor-content [data-type="details"] > div {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .ui-block-editor-content [data-type="detailsSummary"],
+  .ui-block-editor-content [data-type="details"] summary {
+    font-weight: var(--font-weight-medium);
+    list-style: none;
+  }
+
+  .ui-block-editor-toggle-button {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--control-height-xs);
+    block-size: var(--control-height-xs);
+    padding: 0;
+    border: 0;
+    border-radius: calc(var(--radius) / var(--radius-ratio));
+    background: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+  }
+
+  .ui-block-editor-toggle-button::before {
+    content: "";
+    border-block: var(--stroke-lg) solid transparent;
+    border-inline-start: calc(var(--stroke-lg) * 1.5) solid currentColor;
+    transition: rotate var(--duration-fast);
+  }
+
+  [data-type="details"].is-open > .ui-block-editor-toggle-button::before {
+    rotate: 90deg;
+  }
+
+  .ui-block-editor-toggle-button:hover {
+    background-color: hsl(var(--accent));
+  }
+
   .ui-prose img[data-prose-preview] {
     cursor: zoom-in;
   }

package/dist/styles/focus-ring.css

@@ -38,6 +38,7 @@
     .ui-rating-star,
     .ui-prose img[data-prose-preview],
     .ui-prose .ui-prose-toggle-summary,
+    .ui-block-editor-toggle-button,
     a.ui-list-row,
 
     a[data-slot="card"],
@@ -109,6 +110,7 @@
       .ui-rating-star,
       .ui-prose img[data-prose-preview],
       .ui-prose .ui-prose-toggle-summary,
+      .ui-block-editor-toggle-button,
       a.ui-list-row,
       a[data-slot="card"],
       button[data-slot="card"],

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.27.0",
+  "version": "31.28.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -217,10 +217,14 @@
     },
     "BlockEditor": {
       "layers": [
+        "layout.css",
         "control.css",
         "toggle.css",
         "text-layout.css",
         "dialog-layout.css",
+        "alert-layout.css",
+        "data-display-layout.css",
+        "form-layout.css",
         "navigation-layout.css"
       ]
     },
@@ -469,6 +473,13 @@
         "navigation-layout.css"
       ]
     },
+    "EmojiPicker": {
+      "layers": [
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css"
+      ]
+    },
     "EmptyState": {
       "layers": [
         "layout.css"
@@ -736,6 +747,11 @@
         "dialog-layout.css"
       ]
     },
+    "PageCover": {
+      "layers": [
+        "layout.css"
+      ]
+    },
     "Pagination": {
       "layers": [
         "layout.css",

package/dist/styles/layout.css

@@ -924,6 +924,119 @@
     font-size: var(--page-title-font-size-chrome);
   }
 
+  .ui-page-container[data-header-scale="display"] .ui-page-title,
+  .ui-page-container[data-header-scale="display"] .ui-page-header .ui-page-title {
+    font-size: var(--page-title-font-size-display);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--page-title-line-height-display);
+    text-wrap: balance;
+    overflow-wrap: normal;
+  }
+
+  .ui-page-header-icon {
+    display: flex;
+    align-items: center;
+    margin-block-end: var(--space-2);
+    font-size: var(--page-icon-size);
+    line-height: 1;
+  }
+
+  .ui-page-header-icon svg {
+    inline-size: var(--page-icon-size);
+    block-size: var(--page-icon-size);
+  }
+
+  .ui-page-container[data-cover="banner"] {
+    padding-block-start: 0;
+  }
+
+  .ui-page-container[data-cover="banner"] .ui-page-header-icon {
+    position: relative;
+    margin-block-start: calc(-1 * var(--page-icon-cover-overlap));
+  }
+
+  .ui-page-header .ui-page-cover-slot {
+    margin-block-end: var(--space-4);
+  }
+
+  .ui-page-cover {
+    position: relative;
+  }
+
+  .ui-page-cover-frame {
+    position: relative;
+    overflow: hidden;
+    block-size: var(--page-cover-block-size-md);
+    background-color: hsl(var(--muted));
+  }
+
+  .ui-page-cover[data-height="lg"] .ui-page-cover-frame {
+    block-size: var(--page-cover-block-size-lg);
+  }
+
+  .ui-page-cover[data-variant="eyecatch"] .ui-page-cover-frame {
+    block-size: auto;
+    aspect-ratio: var(--page-cover-eyecatch-aspect-ratio);
+    border-radius: var(--page-cover-radius, var(--card-radius, var(--radius)));
+  }
+
+  .ui-page-cover-image {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    user-select: none;
+  }
+
+  .ui-page-cover[data-repositioning] .ui-page-cover-frame {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .ui-page-cover[data-repositioning] .ui-page-cover-frame:active {
+    cursor: grabbing;
+  }
+
+  .ui-page-cover-hint {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: 0;
+    margin-inline: auto;
+    inline-size: fit-content;
+    max-inline-size: calc(100% - 2 * var(--space-4));
+    translate: 0 -50%;
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius-pill);
+    background-color: hsl(var(--background) / 0.85);
+    color: hsl(var(--foreground));
+    font-size: var(--font-size-sm, var(--font-size-base));
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .ui-page-cover-actions {
+    position: absolute;
+    inset-block-end: var(--space-3);
+    inset-inline-end: var(--space-3);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+  }
+
+  @media (hover: hover) and (width >= 40rem) {
+    .ui-page-cover:not(:hover):not(:focus-within) .ui-page-cover-actions {
+      opacity: 0;
+    }
+  }
+
+  @media (width < 40rem) {
+    .ui-page-cover-actions {
+      position: static;
+      justify-content: flex-end;
+      padding: var(--space-2) var(--space-page-active-x, var(--space-4)) 0;
+    }
+  }
+
   @media (max-width: 720px) {
     .ui-page-container {
       --space-page-active-x: var(--space-page-compact-x);

package/dist/tokens/components/control.css

@@ -460,6 +460,16 @@
   --control-status-warning-outline-color: initial;
 }
 
+:root {
+  --emoji-picker-cell-size: var(--control-height-default);
+
+  --emoji-picker-panel-inline-size: calc(
+    8 * var(--emoji-picker-cell-size) + 2 * var(--popover-space-inset, var(--space-3))
+  );
+  --emoji-picker-glyph-size: var(--icon-size-lg);
+  --emoji-picker-grid-max-block-size: 16rem;
+}
+
 @media (pointer: coarse) {
   :root {
     --control-height-compact: var(--band-height-xl);

package/dist/tokens/components/data-display.css

@@ -63,6 +63,7 @@
   --block-editor-gutter-inline-size: calc(2 * var(--control-height-xs) + var(--space-2));
   --block-editor-min-height: var(--band-height-3xl);
 
+  --block-editor-frame-padding: var(--space-3);
   --block-editor-menu-inline-size: 16rem;
   --block-editor-menu-max-block-size: 20rem;
   --prose-code-radius: initial;

package/dist/tokens/semantic/layout.css

@@ -91,6 +91,20 @@
 
   --page-title-font-size-chrome: var(--heading-h3, var(--font-size-base));
 
+  --page-title-font-size-display: var(
+    --font-size-4xl,
+    calc(var(--font-size-display) / var(--font-size-display-ratio))
+  );
+  --page-title-line-height-display: 1.4;
+
+  --page-icon-size: var(--icon-size-4xl);
+  --page-icon-cover-overlap: calc(var(--page-icon-size) * 0.6);
+
+  --page-cover-block-size-md: clamp(8rem, 24vw, 15rem);
+  --page-cover-block-size-lg: clamp(10rem, 32vw, 20rem);
+  --page-cover-eyecatch-aspect-ratio: 1.91;
+  --page-cover-radius: initial;
+
   --page-subtitle-font-size-chrome: var(
     --font-size-2xs,
     calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **182**
-- With ≥1 frame: **158** · zero-frame: **24**
+- Public components: **184**
+- With ≥1 frame: **160** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -50,6 +50,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | VisuallyHidden | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | RangeTimeline | **✗** | · | N/A | N/A | · | · | · | · | · | · |
 | PageContainer | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
+| PageCover | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Flex | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | SpaceCompact | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ResponsiveGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
@@ -193,6 +194,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | AreaChart | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | PieChart | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | CommandPalette | ✓ | N/A | · | · | · | · | · | · | · | · |
+| EmojiPicker | ✓ | · | · | · | · | · | · | · | · | · |
 | TwoFactorSetup | ✓ | N/A | · | · | · | · | · | · | · | · |
 | AuthDivider | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | AuthFooter | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-entry/emoji-picker.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { EmojiPicker, FormField } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * EmojiPicker (gh#1164) — a page icon chosen from the active language's emoji keywords, with
+ * recents and "remove icon".
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  const [icon, setIcon] = React.useState<string | null>(null);
+  return (
+    <PageContainer title="EmojiPicker" subtitle={t("emojiPickerDocs.subtitle")}>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>{t("emojiPickerDocs.title")}</CardTitle>
+          <CardDescription>{t("emojiPickerDocs.description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction="col" gap="sm">
+            <FormField id="page-icon" label={t("emojiPickerDocs.label")}>
+              <EmojiPicker value={icon} onValueChange={setIcon} />
+            </FormField>
+            <Text size="sm" tone="muted">
+              {icon ? t("emojiPickerDocs.chosen", { icon }) : t("emojiPickerDocs.none")}
+            </Text>
+          </Flex>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/i18n/messages/en.json

@@ -1622,5 +1622,21 @@
       "setup": "Setup",
       "release": "Release steps"
     }
+  },
+  "pageCoverDocs": {
+    "title": "Quarterly planning notes",
+    "icon": "Page icon",
+    "reposition": "Reposition",
+    "done": "Done",
+    "body": "Drag the cover while repositioning, or use the arrow keys; the icon opens the emoji picker.",
+    "position": "Focal point: {value}% from the top"
+  },
+  "emojiPickerDocs": {
+    "subtitle": "Search in your language · categories · recents · keyboard grid",
+    "title": "Choose a page icon",
+    "description": "Type a keyword in the current language, or browse the categories. Arrow keys move through the grid; Enter picks.",
+    "label": "Icon",
+    "chosen": "Chosen: {icon}",
+    "none": "No icon"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1615,5 +1615,21 @@
       "setup": "セットアップ",
       "release": "リリース手順"
     }
+  },
+  "pageCoverDocs": {
+    "title": "四半期計画メモ",
+    "icon": "ページアイコン",
+    "reposition": "位置を調整",
+    "done": "完了",
+    "body": "位置を調整中はカバー画像をドラッグするか矢印キーで動かせます。アイコンを押すと絵文字ピッカーが開きます。",
+    "position": "焦点: 上から {value}%"
+  },
+  "emojiPickerDocs": {
+    "subtitle": "言語に合わせた検索 · カテゴリ · 最近使った絵文字 · キーボード操作",
+    "title": "ページアイコンを選ぶ",
+    "description": "表示中の言語でキーワードを入力するか、カテゴリから選びます。矢印キーで移動し、Enter で決定します。",
+    "label": "アイコン",
+    "chosen": "選択中: {icon}",
+    "none": "アイコンなし"
   }
 }

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"
   }
 }