@godxjp/ui 31.27.0 → 31.28.1

package/agent/index.json

@@ -1,21 +1,21 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 182,
+    "components": 184,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2142,
+    "tokens": 2155,
     "vocabulary": 14
   },
   "files": [
     {
       "file": "components-index.json",
-      "note": "50 KB — name + group + tagline for all 182. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "51 KB — name + group + tagline for all 184. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
       "file": "components/<Name>.json",
-      "note": "One file per component (1 KB–36 KB, median 6 KB), each carrying its importPath. This is the selective route: read the index, then fetch only what you need instead of the 1.2 MB blob.",
+      "note": "One file per component (1 KB–36 KB, median 6 KB), each carrying its importPath. This is the selective route: read the index, then fetch only what you need instead of the 1.3 MB blob.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/<Name>.json"
     },
     {
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.27.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.28.1/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1827,
+      "component": 1832,
       "foundation": 211,
-      "semantic": 104
+      "semantic": 112
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.27.0"
+  "version": "31.28.1"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 182 components, 2142 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.27.0.
+> A Japanese-enterprise React design system: 184 components, 2155 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.28.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.27.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.28.1`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -15,10 +15,10 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 21 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 50 KB — all 182 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 51 KB — all 184 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
-- [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1827 `component` knobs.
+- [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.3 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1832 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.27.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.28.1/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -1745,6 +1745,54 @@
     "tier": "semantic",
     "value": "var(--heading-h3, var(--font-size-base))"
   },
+  {
+    "description": "PageContainer `headerScale=\"display\"` (gh#1160) — an ARTICLE's headline (a Notion / note.com page). The 4xl display step, which already scales with the viewport through `--font-size-display`'s clamp (≈25px on a phone → 42px wide), so one knob covers phone and desktop and the compact step below does not apply. CJK titles need more leading than Latin ones at this size: 1.4, not the tight 1.25 a short Latin headline gets.",
+    "name": "--page-title-font-size-display",
+    "tier": "semantic",
+    "value": "var( --font-size-4xl, calc(var(--font-size-display) / var(--font-size-display-ratio)) )"
+  },
+  {
+    "description": "Layout primitive tokens: page, section, stack, inline.",
+    "name": "--page-title-line-height-display",
+    "tier": "semantic",
+    "value": "1.4"
+  },
+  {
+    "description": "The page icon above the title (gh#1160): emoji or glyph, and how far it rides up over a banner cover's bottom edge.",
+    "name": "--page-icon-size",
+    "tier": "semantic",
+    "value": "var(--icon-size-4xl)"
+  },
+  {
+    "description": "Layout primitive tokens: page, section, stack, inline.",
+    "name": "--page-icon-cover-overlap",
+    "tier": "semantic",
+    "value": "calc(var(--page-icon-size) * 0.6)"
+  },
+  {
+    "description": "PageCover (gh#1160). A banner's height scales with the viewport between a phone floor and a desktop ceiling — one knob per step, no media query; an eyecatch keeps note.com's ~1.91:1.",
+    "name": "--page-cover-block-size-md",
+    "tier": "semantic",
+    "value": "clamp(8rem, 24vw, 15rem)"
+  },
+  {
+    "description": "Layout primitive tokens: page, section, stack, inline.",
+    "name": "--page-cover-block-size-lg",
+    "tier": "semantic",
+    "value": "clamp(10rem, 32vw, 20rem)"
+  },
+  {
+    "description": "Layout primitive tokens: page, section, stack, inline.",
+    "name": "--page-cover-eyecatch-aspect-ratio",
+    "tier": "semantic",
+    "value": "1.91"
+  },
+  {
+    "description": "default = var(--card-radius) at the call site (gh#888)",
+    "name": "--page-cover-radius",
+    "tier": "semantic",
+    "value": "initial"
+  },
   {
     "description": "The SUBTITLE step of the same fact. Measured against the reference chat screen, the chrome title and the chrome subtitle were rendering at the SAME step (both --font-size-base), which is not a hierarchy — a channel name and the channel's purpose line read as one undifferentiated block. The design puts the purpose line two steps down (`Text size=\"2xs\"`), and the size is what carries the LINE BOX: at 14px/1.7 the subtitle line is 23.8px tall, at 11px/1.7 it is 18.9px, so the whole header band loses ~5px it was spending on a caption. `--font-size-2xs` (ratio⁻², ≈11px) is that step, and it is the same golden scale the title step reads — never a literal. Quiet by default: a page that never passes `headerScale` never resolves it (#44).",
     "name": "--page-subtitle-font-size-chrome",
@@ -4835,6 +4883,30 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "EmojiPicker (gh#1164): the panel width, an emoji cell (a touch-sized square), the glyph inside it, and how tall the grid gets before it scrolls.",
+    "name": "--emoji-picker-cell-size",
+    "tier": "component",
+    "value": "var(--control-height-default)"
+  },
+  {
+    "description": "Eight cells plus the popover's inset — derived, so 44px touch cells (coarse pointer) still fit eight to a row (8 × 44 + insets = 376px, inside a 390px phone).",
+    "name": "--emoji-picker-panel-inline-size",
+    "tier": "component",
+    "value": "calc( 8 * var(--emoji-picker-cell-size) + 2 * var(--popover-space-inset, var(--space-3)) )"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--emoji-picker-glyph-size",
+    "tier": "component",
+    "value": "var(--icon-size-lg)"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--emoji-picker-grid-max-block-size",
+    "tier": "component",
+    "value": "16rem"
+  },
   {
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
     "name": "--control-height-compact",
@@ -5250,7 +5322,13 @@
     "value": "var(--band-height-3xl)"
   },
   {
-    "description": "The `/` and `[[` menus: wide enough for a label and its description, tall enough for ~8 rows before the list scrolls.",
+    "description": "`appearance=\"framed\"`: the inset between the frame and the text (the handle gutter is extra).",
+    "name": "--block-editor-frame-padding",
+    "tier": "component",
+    "value": "var(--space-3)"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
     "name": "--block-editor-menu-inline-size",
     "tier": "component",
     "value": "16rem"

package/dist/components/data-display/tree.js

@@ -63,6 +63,7 @@ function TreeRoot({
   defaultExpandedValues,
   onExpandedValuesChange,
   defaultExpandAll = false,
+  expandAction = false,
   loadData,
   titleRender,
   filterTreeNode,
@@ -491,6 +492,10 @@ function TreeRoot({
         onClick: () => {
           if (nodeDisabled) return;
           select(node);
+          if (expandAction === "click" && expandable) toggleExpand(node);
+        },
+        onDoubleClick: () => {
+          if (!nodeDisabled && expandAction === "doubleClick" && expandable) toggleExpand(node);
         },
         "data-value": node.value,
         "data-selected": isSelected ? "true" : void 0,

package/dist/components/data-entry/command-palette.d.ts

@@ -2,6 +2,11 @@ import * as React from "react";
 export type CommandPaletteItem = {
     id: string;
     label: React.ReactNode;
+    /**
+     * Decorative glyph before the label — a folder, a file, an emoji (gh#1159). Sized like a menu
+     * row's icon (`--menu-icon-size`) and hidden from assistive tech: the label is the name.
+     */
+    icon?: React.ReactNode;
     searchValue?: string;
     meta?: React.ReactNode;
     disabled?: boolean;

package/dist/components/data-entry/command-palette.js

@@ -189,6 +189,7 @@ function CommandPalette({
                         onSelect(item, modifiers);
                       },
                       children: [
+                        item.icon != null ? /* @__PURE__ */ jsx("span", { className: "ui-command-palette-icon", "aria-hidden": "true", children: item.icon }) : null,
                         /* @__PURE__ */ jsx("span", { className: "ui-command-palette-label", children: item.label }),
                         item.meta != null ? /* @__PURE__ */ jsx("span", { className: "ui-command-palette-meta", children: item.meta }) : null
                       ]

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