@godxjp/ui 31.26.2 → 31.28.0

package/dist/components/data-entry/emoji-data.d.ts

@@ -0,0 +1,43 @@
+/**
+ * EmojiPicker's data (gh#1164): `emojibase-data` (MIT, CLDR annotations), ONE locale's compact file,
+ * loaded the first time a picker opens — never in the kit's main bundle. Each file is ~570 KB raw
+ * (~100 KB gzip). Unsupported locales fall back to English. Skin-tone variants are ignored.
+ */
+export type EmojiEntry = {
+    unicode: string;
+    label: string;
+    tags: readonly string[];
+    group: number;
+    order: number;
+};
+/** Emojibase groups, in display order — 2 (components: bare skin-tone swatches) is not shown. */
+export declare const EMOJI_GROUPS: readonly [{
+    readonly group: 0;
+    readonly key: "smileys";
+}, {
+    readonly group: 1;
+    readonly key: "people";
+}, {
+    readonly group: 3;
+    readonly key: "animals";
+}, {
+    readonly group: 4;
+    readonly key: "food";
+}, {
+    readonly group: 5;
+    readonly key: "travel";
+}, {
+    readonly group: 6;
+    readonly key: "activities";
+}, {
+    readonly group: 7;
+    readonly key: "objects";
+}, {
+    readonly group: 8;
+    readonly key: "symbols";
+}, {
+    readonly group: 9;
+    readonly key: "flags";
+}];
+export declare function loadEmoji(locale: string): Promise<EmojiEntry[]>;
+export declare function searchEmoji(entries: readonly EmojiEntry[], query: string, limit?: number): EmojiEntry[];

package/dist/components/data-entry/emoji-data.js

@@ -0,0 +1,54 @@
+const LOADERS = {
+  ja: () => import("emojibase-data/ja/compact.json"),
+  en: () => import("emojibase-data/en/compact.json"),
+  vi: () => import("emojibase-data/vi/compact.json")
+};
+const EMOJI_GROUPS = [
+  { group: 0, key: "smileys" },
+  { group: 1, key: "people" },
+  { group: 3, key: "animals" },
+  { group: 4, key: "food" },
+  { group: 5, key: "travel" },
+  { group: 6, key: "activities" },
+  { group: 7, key: "objects" },
+  { group: 8, key: "symbols" },
+  { group: 9, key: "flags" }
+];
+const cache = /* @__PURE__ */ new Map();
+function loadEmoji(locale) {
+  const lang = locale.toLowerCase().split("-")[0];
+  const key = lang in LOADERS ? lang : "en";
+  let pending = cache.get(key);
+  if (!pending) {
+    pending = LOADERS[key]().then(
+      ({ default: raw }) => raw.filter((e) => typeof e.group === "number" && e.group !== 2).map((e) => ({
+        unicode: e.unicode,
+        label: e.label,
+        tags: e.tags ?? [],
+        group: e.group,
+        order: e.order ?? 0
+      })).sort((a, b) => a.order - b.order)
+    );
+    cache.set(key, pending);
+  }
+  return pending;
+}
+const fold = (value) => value.normalize("NFKC").toLowerCase();
+function searchEmoji(entries, query, limit = 120) {
+  const q = fold(query.trim());
+  if (!q) return [];
+  const starts = [];
+  const contains = [];
+  for (const entry of entries) {
+    const terms = [entry.label, ...entry.tags].map(fold);
+    if (terms.some((t) => t.startsWith(q))) starts.push(entry);
+    else if (terms.some((t) => t.includes(q))) contains.push(entry);
+    if (starts.length >= limit) break;
+  }
+  return [...starts, ...contains].slice(0, limit);
+}
+export {
+  EMOJI_GROUPS,
+  loadEmoji,
+  searchEmoji
+};

package/dist/components/data-entry/emoji-picker.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { EmojiPickerProp } from "../../props/components/data-entry.prop.js";
+export type { EmojiPickerProp, EmojiPickerProp as EmojiPickerProps, } from "../../props/components/data-entry.prop.js";
+/**
+ * EmojiPicker (gh#1164) — a page icon / reaction picker in a Popover: search by ja / en / vi
+ * keywords (emojibase-data, the CLDR annotations, loaded for the active locale only when it first
+ * opens), categories, per-user recents, and "remove icon". No skin tones.
+ *
+ * The emoji are a WAI-ARIA GRID: one tab stop, arrows move by cell / row, Home / End to the row
+ * ends, Ctrl+Home / End to the first / last emoji, Enter or Space picks. ArrowDown from the search
+ * field enters the grid.
+ */
+export declare function EmojiPicker({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, removable, recentsKey, size, disabled, trigger, "aria-label": ariaLabel, id, className, }: EmojiPickerProp): React.JSX.Element;

package/dist/components/data-entry/emoji-picker.js

@@ -0,0 +1,272 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Clock,
+  Flag,
+  Lightbulb,
+  PawPrint,
+  Plane,
+  Shapes,
+  Smile,
+  SmilePlus,
+  Trophy,
+  User,
+  UtensilsCrossed
+} from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { EMOJI_GROUPS, loadEmoji, searchEmoji } from "./emoji-data.js";
+import { SearchInput } from "./search-input.js";
+const COLUMNS = 8;
+const ICON_SIZE = { xs: "icon-xs", sm: "icon-sm", md: "icon", lg: "icon-lg" };
+const RECENTS_LIMIT = 24;
+const GROUP_ICON = {
+  smileys: Smile,
+  people: User,
+  animals: PawPrint,
+  food: UtensilsCrossed,
+  travel: Plane,
+  activities: Trophy,
+  objects: Lightbulb,
+  symbols: Shapes,
+  flags: Flag
+};
+function readRecents(key) {
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    const list = raw ? JSON.parse(raw) : [];
+    return Array.isArray(list) ? list.filter((e) => typeof e === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function writeRecents(key, list) {
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify(list));
+  } catch {
+  }
+}
+function EmojiPicker({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  removable = true,
+  recentsKey = "godxjp-ui:emoji-recents",
+  size = "md",
+  disabled = false,
+  trigger,
+  "aria-label": ariaLabel,
+  id,
+  className
+}) {
+  const { t, locale } = useTranslation();
+  const [inner, setInner] = React.useState(defaultValue);
+  const value = valueProp !== void 0 ? valueProp : inner;
+  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+  const open = openProp ?? innerOpen;
+  const setOpen = (next) => {
+    if (openProp === void 0) setInnerOpen(next);
+    onOpenChange?.(next);
+  };
+  const [entries, setEntries] = React.useState(null);
+  const [query, setQuery] = React.useState("");
+  const [recents, setRecents] = React.useState([]);
+  const [tab, setTab] = React.useState("smileys");
+  const [active, setActive] = React.useState(0);
+  const gridRef = React.useRef(null);
+  const gridId = React.useId();
+  React.useEffect(() => {
+    if (!open) return;
+    setRecents(readRecents(recentsKey));
+    setQuery("");
+    let live = true;
+    void loadEmoji(locale).then((loaded) => {
+      if (live) setEntries(loaded);
+    });
+    return () => {
+      live = false;
+    };
+  }, [open, locale, recentsKey]);
+  React.useEffect(() => {
+    if (open && recents.length > 0) setTab("recent");
+  }, [open, recents.length]);
+  const byUnicode = React.useMemo(
+    () => new Map((entries ?? []).map((e) => [e.unicode, e])),
+    [entries]
+  );
+  const shown = React.useMemo(() => {
+    if (!entries) return [];
+    if (query.trim()) return searchEmoji(entries, query);
+    if (tab === "recent") {
+      return recents.map(
+        (u) => byUnicode.get(u) ?? { unicode: u, label: u, tags: [], group: -1, order: 0 }
+      );
+    }
+    const group = EMOJI_GROUPS.find((g) => g.key === tab)?.group;
+    return entries.filter((e) => e.group === group);
+  }, [entries, query, tab, recents, byUnicode]);
+  React.useEffect(() => setActive(0), [tab, query]);
+  const pick = (unicode) => {
+    if (valueProp === void 0) setInner(unicode);
+    onValueChange?.(unicode);
+    if (unicode) {
+      const next = [unicode, ...readRecents(recentsKey).filter((u) => u !== unicode)].slice(
+        0,
+        RECENTS_LIMIT
+      );
+      writeRecents(recentsKey, next);
+    }
+    setOpen(false);
+  };
+  const focusCell = (index) => {
+    const clamped = Math.max(0, Math.min(shown.length - 1, index));
+    setActive(clamped);
+    const cell = () => gridRef.current?.querySelector(`[data-index="${clamped}"]`);
+    const now = cell();
+    if (now) now.focus();
+    else requestAnimationFrame(() => cell()?.focus());
+  };
+  const onGridKeyDown = (event) => {
+    const row = Math.floor(active / COLUMNS);
+    const moves = {
+      ArrowRight: active + 1,
+      ArrowLeft: active - 1,
+      ArrowDown: active + COLUMNS,
+      ArrowUp: active - COLUMNS,
+      Home: event.ctrlKey ? 0 : row * COLUMNS,
+      End: event.ctrlKey ? shown.length - 1 : row * COLUMNS + COLUMNS - 1
+    };
+    if (event.key in moves) {
+      event.preventDefault();
+      focusCell(moves[event.key]);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const entry = shown[active];
+      if (entry) pick(entry.unicode);
+    }
+  };
+  const rows = [];
+  for (let i = 0; i < shown.length; i += COLUMNS) rows.push(shown.slice(i, i + COLUMNS));
+  const tabs = [
+    ...recents.length ? [{ key: "recent", label: t("dataEntry.emojiPicker.recent"), Icon: Clock }] : [],
+    ...EMOJI_GROUPS.map((g) => ({
+      key: g.key,
+      label: t(`dataEntry.emojiPicker.categories.${g.key}`),
+      Icon: GROUP_ICON[g.key]
+    }))
+  ];
+  const gridLabel = query.trim() ? t("dataEntry.emojiPicker.search") : tabs.find((x) => x.key === tab)?.label ?? t("dataEntry.emojiPicker.grid");
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx(
+      Button,
+      {
+        id,
+        variant: "ghost",
+        size: value ? size : ICON_SIZE[size],
+        disabled,
+        "aria-label": ariaLabel ?? t("dataEntry.emojiPicker.trigger"),
+        className: cn("ui-emoji-picker-trigger", className),
+        "data-has-value": value ? "" : void 0,
+        children: value ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: value }) : /* @__PURE__ */ jsx(SmilePlus, { "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        className: "ui-emoji-picker",
+        "aria-label": ariaLabel ?? t("dataEntry.emojiPicker.trigger"),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ui-emoji-picker-head",
+              onKeyDown: (event) => {
+                if (event.key === "ArrowDown" && shown.length && event.target.tagName === "INPUT") {
+                  event.preventDefault();
+                  focusCell(0);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  SearchInput,
+                  {
+                    "aria-label": t("dataEntry.emojiPicker.search"),
+                    placeholder: t("dataEntry.emojiPicker.search"),
+                    value: query,
+                    onValueChange: setQuery
+                  }
+                ),
+                removable && value ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => pick(null), children: t("dataEntry.emojiPicker.remove") }) : null
+              ]
+            }
+          ),
+          !query.trim() ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "tablist",
+              "aria-label": t("dataEntry.emojiPicker.grid"),
+              className: "ui-emoji-picker-tabs",
+              children: tabs.map((x) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  role: "tab",
+                  size: "icon-sm",
+                  variant: "ghost",
+                  "aria-selected": tab === x.key,
+                  "aria-controls": gridId,
+                  "aria-label": x.label,
+                  title: x.label,
+                  "data-state": tab === x.key ? "active" : void 0,
+                  onClick: () => setTab(x.key),
+                  children: /* @__PURE__ */ jsx(x.Icon, { "aria-hidden": "true" })
+                },
+                x.key
+              ))
+            }
+          ) : null,
+          entries === null ? /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", role: "status", className: "ui-emoji-picker-state", children: t("dataEntry.emojiPicker.loading") }) : shown.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", role: "status", className: "ui-emoji-picker-state", children: t("dataEntry.emojiPicker.empty") }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: gridRef,
+              id: gridId,
+              role: "grid",
+              "aria-label": gridLabel,
+              className: "ui-emoji-picker-grid",
+              onKeyDown: onGridKeyDown,
+              children: rows.map((row, r) => /* @__PURE__ */ jsx("div", { role: "row", className: "ui-emoji-picker-row", children: row.map((entry, c) => {
+                const index = r * COLUMNS + c;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "gridcell",
+                    "data-index": index,
+                    tabIndex: index === active ? 0 : -1,
+                    "aria-label": entry.label,
+                    "aria-selected": entry.unicode === value,
+                    title: entry.label,
+                    className: "ui-emoji-picker-cell ui-focus-ring",
+                    onClick: () => pick(entry.unicode),
+                    onFocus: () => setActive(index),
+                    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: entry.unicode })
+                  },
+                  entry.unicode
+                );
+              }) }, r))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  EmojiPicker
+};

package/dist/components/data-entry/index.d.ts

@@ -54,6 +54,8 @@ export type { TransferProps, TransferItemProp } from "./transfer.js";
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
 export type { CommandProps } from "./command.js";
 export { CommandPalette } from "./command-palette.js";
+export { EmojiPicker } from "./emoji-picker.js";
+export type { EmojiPickerProp, EmojiPickerProps } from "./emoji-picker.js";
 export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteSelectModifiers, } from "./command-palette.js";
 export { PasswordInput } from "./password-input.js";
 export type { PasswordInputProps, PasswordVisibilityToggleProp } from "./password-input.js";

package/dist/components/data-entry/index.js

@@ -53,6 +53,7 @@ import {
   CommandList
 } from "./command.js";
 import { CommandPalette } from "./command-palette.js";
+import { EmojiPicker } from "./emoji-picker.js";
 import { PasswordInput } from "./password-input.js";
 import { PasswordStrength, usePasswordStrength } from "./password-strength.js";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
@@ -82,6 +83,7 @@ export {
   CommandPalette,
   DatePicker,
   DayButton,
+  EmojiPicker,
   Field,
   Form,
   FormErrors,

package/dist/components/layout/index.d.ts

@@ -1,5 +1,7 @@
 export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
+export { PageCover } from "./page-cover.js";
+export type { PageCoverProp, PageCoverProps } from "./page-cover.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
 export { SpaceCompact } from "./space-compact.js";

package/dist/components/layout/index.js

@@ -1,4 +1,5 @@
 import { PageContainer } from "./page-container.js";
+import { PageCover } from "./page-cover.js";
 import { Flex } from "./flex.js";
 import { SpaceCompact } from "./space-compact.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
@@ -55,6 +56,7 @@ export {
   NavList,
   OrgSwitcher,
   PageContainer,
+  PageCover,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, PageContainerExtraProp, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, titleRef, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, titleRef, density, variant, preset, headerLayout, headerScale, icon, cover, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -51,6 +51,8 @@ function PageContainerRoot({
   preset = "default",
   headerLayout = "stack",
   headerScale = "document",
+  icon,
+  cover,
   measure = "default",
   stickyFooter = false,
   footerReveal = "always",
@@ -63,12 +65,14 @@ function PageContainerRoot({
   const { t } = useTranslation();
   const { start: extraStart, end: extraEnd } = resolvePageExtra(extra);
   const titleFocus = titleRef === void 0 ? void 0 : { ref: titleRef, tabIndex: -1 };
+  const coverVariant = cover == null || cover === false ? void 0 : isValidElement(cover) && cover.props.variant === "eyecatch" ? "eyecatch" : "banner";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-preset": preset,
       "data-measure": measure,
-      "data-header-scale": headerScale === "chrome" ? "chrome" : void 0,
+      "data-header-scale": headerScale === "document" ? void 0 : headerScale,
+      "data-cover": coverVariant,
       "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
@@ -82,6 +86,7 @@ function PageContainerRoot({
         className
       ),
       children: [
+        coverVariant === "banner" ? /* @__PURE__ */ jsx("div", { className: "ui-page-cover-slot", children: cover }) : null,
         /* @__PURE__ */ jsxs(
           "header",
           {
@@ -134,8 +139,10 @@ function PageContainerRoot({
                   }) })
                 }
               ),
+              coverVariant === "eyecatch" ? /* @__PURE__ */ jsx("div", { className: "ui-page-cover-slot", children: cover }) : null,
               /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
                 /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading", children: [
+                  icon != null && icon !== false ? /* @__PURE__ */ jsx("div", { className: "ui-page-header-icon", children: icon }) : null,
                   headerLoading ? /* @__PURE__ */ jsx(
                     "h1",
                     {

package/dist/components/layout/page-cover.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { PageCoverProp } from "../../props/components/layout.prop.js";
+export type { PageCoverProp, PageCoverProp as PageCoverProps, } from "../../props/components/layout.prop.js";
+/**
+ * PageCover (gh#1160) — a page's cover image: Notion's banner across the top, or note.com's
+ * eyecatch in the reading column (`variant="eyecatch"`, ~1.91:1, rounded). Put it in
+ * `PageContainer cover`, which places it and lets the page `icon` overlap its bottom edge.
+ *
+ * The focal point is `positionY` (0 top – 100 bottom), applied as `object-position: 50% y%`.
+ * While `repositioning`, the image IS the control: a vertical WAI-ARIA slider that follows a drag
+ * (pixels map to percent through the image's real overflow, so the picture tracks the pointer)
+ * and the slider keys (arrows ±1, PageUp / PageDown ±10, Home / End); Enter or Escape ends it.
+ */
+export declare const PageCover: React.ForwardRefExoticComponent<PageCoverProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/page-cover.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const clamp = (value) => Math.min(100, Math.max(0, Math.round(value)));
+const PageCover = React.forwardRef(function PageCover2({
+  src,
+  alt,
+  positionY = 50,
+  onPositionChange,
+  repositioning = false,
+  onRepositioningChange,
+  variant = "banner",
+  height = "md",
+  actions,
+  id,
+  className
+}, ref) {
+  const { t } = useTranslation();
+  const frameRef = React.useRef(null);
+  const imageRef = React.useRef(null);
+  const drag = React.useRef(null);
+  const y = clamp(positionY);
+  const overflow = () => {
+    const frame = frameRef.current;
+    const image = imageRef.current;
+    if (!frame || !image || !image.naturalWidth) return 0;
+    const rendered = frame.clientWidth / image.naturalWidth * image.naturalHeight;
+    return Math.max(0, rendered - frame.clientHeight);
+  };
+  const onKeyDown = (event) => {
+    if (!repositioning) return;
+    const step = {
+      ArrowUp: 1,
+      ArrowRight: 1,
+      ArrowDown: -1,
+      ArrowLeft: -1,
+      PageUp: 10,
+      PageDown: -10
+    }[event.key];
+    let next = null;
+    if (step !== void 0) next = clamp(y + step);
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = 100;
+    else if (event.key === "Enter" || event.key === "Escape") {
+      event.preventDefault();
+      onRepositioningChange?.(false);
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    if (next !== y) onPositionChange?.(next);
+  };
+  const onPointerDown = (event) => {
+    if (!repositioning || event.button !== 0) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = { pointer: event.pointerId, startY: event.clientY, startValue: y };
+  };
+  const onPointerMove = (event) => {
+    const active = drag.current;
+    if (!active || active.pointer !== event.pointerId) return;
+    const travel = overflow();
+    if (travel <= 0) return;
+    const next = clamp(active.startValue - (event.clientY - active.startY) / travel * 100);
+    if (next !== y) onPositionChange?.(next);
+  };
+  const endDrag = (event) => {
+    if (drag.current?.pointer === event.pointerId) drag.current = null;
+  };
+  const slider = repositioning ? {
+    role: "slider",
+    tabIndex: 0,
+    "aria-orientation": "vertical",
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": y,
+    "aria-valuetext": t("layout.pageCover.valueText", { value: y }),
+    "aria-label": t("layout.pageCover.position")
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      id,
+      "data-slot": "page-cover",
+      "data-variant": variant,
+      "data-height": variant === "banner" ? height : void 0,
+      "data-repositioning": repositioning ? "" : void 0,
+      className: cn("ui-page-cover", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: frameRef,
+            className: "ui-page-cover-frame ui-focus-ring",
+            onKeyDown,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            ...slider,
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  ref: imageRef,
+                  className: "ui-page-cover-image",
+                  src,
+                  alt,
+                  draggable: false,
+                  style: { objectPosition: `50% ${y}%` }
+                }
+              ),
+              repositioning ? /* @__PURE__ */ jsx("span", { className: "ui-page-cover-hint", "aria-hidden": "true", children: t("layout.pageCover.hint") }) : null
+            ]
+          }
+        ),
+        actions != null ? /* @__PURE__ */ jsx("div", { className: "ui-page-cover-actions", children: actions }) : null
+      ]
+    }
+  );
+});
+PageCover.displayName = "PageCover";
+export {
+  PageCover
+};

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": "31.26.2",
+  "version": "31.28.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

@@ -212,6 +212,26 @@
       "openDialog": "Choose from list",
       "openSearch": "Search",
       "suggestions": "Suggestions"
+    },
+    "emojiPicker": {
+      "trigger": "Choose an icon",
+      "search": "Search emoji",
+      "recent": "Recently used",
+      "remove": "Remove icon",
+      "empty": "No emoji found",
+      "loading": "Loading emoji…",
+      "grid": "Emoji",
+      "categories": {
+        "smileys": "Smileys & emotion",
+        "people": "People & body",
+        "animals": "Animals & nature",
+        "food": "Food & drink",
+        "travel": "Travel & places",
+        "activities": "Activities",
+        "objects": "Objects",
+        "symbols": "Symbols",
+        "flags": "Flags"
+      }
     }
   },
   "feedback": {
@@ -301,6 +321,11 @@
     },
     "draggablePanel": {
       "moveLabel": "Move panel. Use the arrow keys to move it, or hold Shift for larger steps."
+    },
+    "pageCover": {
+      "position": "Cover position",
+      "hint": "Drag the image, or use the arrow keys, to reposition it",
+      "valueText": "{value}% from the top"
     }
   },
   "dataDisplay": {