@tensor_1/react 2.18.0 → 2.19.0

package/dist/components/SaveStatus.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+type SaveStatusState = 'idle' | 'saving' | 'saved' | 'failed';
+/** Every visible or announced string. Pass translations; English defaults fill the gaps. */
+interface SaveStatusLabels {
+    saving: string;
+    saved: string;
+    failed: string;
+    retry: string;
+}
+declare const DEFAULT_SAVE_STATUS_LABELS: SaveStatusLabels;
+interface SaveStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Where the save is. `idle` shows nothing but keeps the live region in place. */
+    state: SaveStatusState;
+    labels?: Partial<SaveStatusLabels>;
+    /** Offered as a button only while `state` is `failed`. */
+    onRetry?: () => void;
+}
+/**
+ * Inline save feedback over `.uix-save-status`: saving → saved → failed, with a retry.
+ * For autosave and inline edits, where a toast would be too loud and silence leaves the
+ * user guessing (LD-13).
+ *
+ * The status text sits in a polite live region that stays mounted in every state,
+ * including `idle`. A region inserted together with its text announces nothing, so
+ * rendering null while idle would silence the first "Saving…". The retry button sits
+ * outside the region so its label is not read out on every change.
+ */
+declare function SaveStatus({ state, labels, onRetry, className, ...props }: SaveStatusProps): react.JSX.Element;
+
+export { DEFAULT_SAVE_STATUS_LABELS, SaveStatus, type SaveStatusLabels, type SaveStatusProps, type SaveStatusState };

package/dist/components/SaveStatus.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+const DEFAULT_SAVE_STATUS_LABELS = {
+  saving: "Saving\u2026",
+  saved: "Saved",
+  failed: "Could not save",
+  retry: "Try again"
+};
+function SaveStatus({ state, labels, onRetry, className, ...props }) {
+  const text = { ...DEFAULT_SAVE_STATUS_LABELS, ...labels };
+  const message = state === "idle" ? "" : text[state];
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-save-status", className), "data-state": state, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-save-status__icon", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "uix-save-status__text", role: "status", "aria-live": "polite", children: message }),
+    state === "failed" && onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--link uix-btn--sm uix-save-status__retry", onClick: onRetry, children: text.retry })
+  ] });
+}
+export {
+  DEFAULT_SAVE_STATUS_LABELS,
+  SaveStatus
+};

package/dist/components/Tabs.d.ts

@@ -19,13 +19,20 @@ interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
     /** The owning `<Tab>`'s value — the panel renders only while that tab is selected. */
     value: string;
     children?: ReactNode;
+    /**
+     * Keep the panel mounted while another tab is selected, `hidden` instead of removed.
+     * Opt in when leaving the tab would throw away work or a fetch the user already paid
+     * for — a loaded list, a half-filled form, a scroll position. Off by default: the
+     * panel's subtree then costs nothing until it is first shown.
+     */
+    keepMounted?: boolean;
 }
 /**
  * The tabpanel paired with a `<Tab>` by `value` (UIX-A11Y-2): labelled by its tab,
  * `tabIndex 0` so Tab from the tablist lands in the content, rendered only while
- * selected. Place it as a direct child of `<Tabs>` — it is hoisted out of the tablist —
- * or anywhere the Tabs context reaches.
+ * selected — or kept `hidden` with `keepMounted`. Place it as a direct child of
+ * `<Tabs>` — it is hoisted out of the tablist — or anywhere the Tabs context reaches.
  */
-declare function TabPanel({ value, children, ...props }: TabPanelProps): react.JSX.Element | null;
+declare function TabPanel({ value, children, keepMounted, ...props }: TabPanelProps): react.JSX.Element | null;
 
 export { Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/components/Tabs.js

@@ -85,16 +85,18 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
     }
   );
 }
-function TabPanel({ value, children, ...props }) {
+function TabPanel({ value, children, keepMounted, ...props }) {
   const ctx = useContext(TabsCtx);
-  if (ctx.value !== value) return null;
+  const selected = ctx.value === value;
+  if (!selected && !keepMounted) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "tabpanel",
       id: ctx.baseId ? `${ctx.baseId}-panel-${value}` : void 0,
       "aria-labelledby": ctx.baseId ? `${ctx.baseId}-tab-${value}` : void 0,
-      tabIndex: 0,
+      hidden: !selected || void 0,
+      tabIndex: selected ? 0 : -1,
       ...props,
       children
     }

package/dist/emoji-image-WQLh8ZQP.d.cts

@@ -0,0 +1,128 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+import { P as Placement } from './overlay-position-CEGSz6Z2.cjs';
+
+type EmojiLocale = 'en' | 'de';
+interface EmojiEntry {
+    /** The Unicode emoji — the only form ever stored. */
+    emoji: string;
+    /** Localized name ("thumbs up" / "Daumen hoch"). */
+    name: string;
+    /** Localized search terms. */
+    tags: ReadonlyArray<string>;
+    /** Index into `EmojiData.groups`. */
+    group: number;
+}
+interface EmojiGroup {
+    key: string;
+    /** Localized category name. */
+    name: string;
+}
+interface EmojiData {
+    locale: EmojiLocale;
+    groups: ReadonlyArray<EmojiGroup>;
+    emojis: ReadonlyArray<EmojiEntry>;
+    /** Localized names by emoji, for aria-labels of quick picks and recents. */
+    names: ReadonlyMap<string, string>;
+}
+type EmojiDataLoader = (locale: EmojiLocale) => Promise<EmojiData>;
+/** Shape of `emojibase-data/<locale>/compact.json` entries (the fields we read). */
+interface CompactEmoji {
+    unicode: string;
+    label: string;
+    group?: number;
+    order?: number;
+    tags?: string[];
+}
+/** Shape of `emojibase-data/<locale>/messages.json` (the fields we read). */
+interface EmojiMessages {
+    groups: ReadonlyArray<{
+        key: string;
+        message: string;
+        order: number;
+    }>;
+}
+/** Build picker data from the emojibase JSON of one locale. */
+declare function buildEmojiData(locale: EmojiLocale, compact: ReadonlyArray<CompactEmoji>, messages: EmojiMessages): EmojiData;
+/**
+ * Default loader: dynamic imports of the emojibase JSON, one chunk per locale, cached.
+ * Requires the optional peer `emojibase-data`.
+ */
+declare const loadEmojiData: EmojiDataLoader;
+/**
+ * Search by name and tags. Word-prefix matches rank before substring matches;
+ * dataset order breaks ties. Case and diacritics are folded, so "uberr" finds "Überraschung".
+ */
+declare function searchEmoji(data: EmojiData, query: string, limit?: number): EmojiEntry[];
+
+interface EmojiPickerLabels {
+    /** Accessible name of the picker dialog. */
+    dialog: string;
+    /** Search field label and placeholder. */
+    search: string;
+    /** Heading of the recently-used section. */
+    recent: string;
+    /** Heading of the quick-pick section. */
+    quickPicks: string;
+    /** Accessible name of the category navigation. */
+    categories: string;
+    /** Shown when a search matches nothing. */
+    noResults: string;
+    /** Shown while the emoji data loads. */
+    loading: string;
+    /** Shown when the emoji data cannot be loaded. */
+    loadFailed: string;
+}
+declare const DEFAULT_EMOJI_PICKER_LABELS: EmojiPickerLabels;
+interface EmojiPickerProps {
+    /** Called with the chosen emoji as Unicode text. The picker then closes. */
+    onSelect: (emoji: string) => void;
+    /** The button that opens the picker. It receives `aria-haspopup`, `aria-expanded` and a click handler. */
+    trigger: ReactElement;
+    labels?: Partial<EmojiPickerLabels>;
+    /** Language of emoji names and search terms. Default `'en'`. */
+    locale?: EmojiLocale;
+    /** Emoji shown first, before recents and categories. */
+    quickPicks?: ReadonlyArray<string>;
+    /**
+     * Same-origin folder of fallback PNGs for emoji this device cannot draw (see
+     * `emojiImageFileName` for the naming). Unset = native emoji only.
+     */
+    emojiImageBaseUrl?: string;
+    /**
+     * Replace the emojibase loader (tests, or another bundled dataset). The default loads
+     * a bundled chunk through dynamic `import()`; it never fetches a URL.
+     */
+    loadData?: EmojiDataLoader;
+    /** localStorage key for recently used emoji. */
+    recentStorageKey?: string;
+    placement?: Placement;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/** Fixed column count; the CSS grid uses the same number. */
+declare const EMOJI_GRID_COLUMNS = 8;
+/**
+ * Emoji picker in a native popover: search, quick picks, recently used and the
+ * Unicode categories, with names in English or German. The emoji dataset loads on
+ * first open. The grid is one tab stop; arrow keys, Home and End move within it.
+ */
+declare function EmojiPicker({ onSelect, trigger, labels: labelOverrides, locale, quickPicks, loadData, recentStorageKey, placement, onOpenChange, className, emojiImageBaseUrl, }: EmojiPickerProps): react.JSX.Element;
+
+/**
+ * The usable base path, or `undefined` for unset/rejected values. Accepts "/path" and
+ * "./path"; rejects schemes ("https:", "data:", "javascript:"), protocol-relative
+ * "//host", backslashes and whitespace. Trailing slashes are removed.
+ */
+declare function normalizeEmojiImageBaseUrl(value: string | undefined): string | undefined;
+/** `👩‍💻` → `1f469-200d-1f4bb.png` */
+declare function emojiImageFileName(emoji: string): string;
+/**
+ * Whether this device draws `emoji` in colour. Draws it on a small canvas and looks for a
+ * coloured pixel: a missing glyph (tofu) or a monochrome fallback font is drawn in plain
+ * black. Without a DOM or canvas (server, tests) the answer is `true`, so nothing is
+ * swapped for an image there. Results are cached per emoji.
+ */
+declare function canRenderEmoji(emoji: string): boolean;
+
+export { type CompactEmoji as C, DEFAULT_EMOJI_PICKER_LABELS as D, type EmojiPickerLabels as E, type EmojiLocale as a, type EmojiDataLoader as b, EMOJI_GRID_COLUMNS as c, type EmojiData as d, type EmojiEntry as e, type EmojiGroup as f, type EmojiMessages as g, EmojiPicker as h, type EmojiPickerProps as i, buildEmojiData as j, canRenderEmoji as k, emojiImageFileName as l, loadEmojiData as m, normalizeEmojiImageBaseUrl as n, searchEmoji as s };

package/dist/emoji-image.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The usable base path, or `undefined` for unset/rejected values. Accepts "/path" and
+ * "./path"; rejects schemes ("https:", "data:", "javascript:"), protocol-relative
+ * "//host", backslashes and whitespace. Trailing slashes are removed.
+ */
+declare function normalizeEmojiImageBaseUrl(value: string | undefined): string | undefined;
+/** `👩‍💻` → `1f469-200d-1f4bb.png` */
+declare function emojiImageFileName(emoji: string): string;
+declare function emojiImageSrc(base: string, emoji: string): string;
+/**
+ * Whether this device draws `emoji` in colour. Draws it on a small canvas and looks for a
+ * coloured pixel: a missing glyph (tofu) or a monochrome fallback font is drawn in plain
+ * black. Without a DOM or canvas (server, tests) the answer is `true`, so nothing is
+ * swapped for an image there. Results are cached per emoji.
+ */
+declare function canRenderEmoji(emoji: string): boolean;
+/** Test hook: forget cached answers and the canvas. */
+declare function resetEmojiSupportCache(): void;
+/**
+ * Emoji sequences in text: RGI emoji where the engine supports the `v` flag, otherwise
+ * pictographs with their modifiers, ZWJ joins and flag pairs.
+ */
+declare function emojiPattern(): RegExp;
+
+export { canRenderEmoji, emojiImageFileName, emojiImageSrc, emojiPattern, normalizeEmojiImageBaseUrl, resetEmojiSupportCache };

package/dist/emoji-image.js

@@ -0,0 +1,80 @@
+const warned = /* @__PURE__ */ new Set();
+const devWarn = (message) => {
+  if (warned.has(message) || typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  warned.add(message);
+  console.warn(message);
+};
+function normalizeEmojiImageBaseUrl(value) {
+  if (value === void 0 || value === "") return void 0;
+  const sameOrigin = /^(?:\/(?![/\\])|\.\/)/.test(value) && !/[\\\s]/.test(value) && !/^[^/?#]*:/.test(value);
+  if (!sameOrigin) {
+    devWarn(`uix: emojiImageBaseUrl "${value}" was ignored \u2014 only same-origin paths starting with "/" or "./" are allowed.`);
+    return void 0;
+  }
+  return value.replace(/\/+$/, "") || "/";
+}
+function emojiImageFileName(emoji) {
+  return `${Array.from(emoji, (ch) => ch.codePointAt(0).toString(16)).join("-")}.png`;
+}
+function emojiImageSrc(base, emoji) {
+  return `${base === "/" ? "" : base}/${emojiImageFileName(emoji)}`;
+}
+const support = /* @__PURE__ */ new Map();
+let context;
+const SIZE = 20;
+function canRenderEmoji(emoji) {
+  const cached = support.get(emoji);
+  if (cached !== void 0) return cached;
+  if (typeof document === "undefined") return true;
+  if (context === void 0) {
+    try {
+      const canvas = document.createElement("canvas");
+      canvas.width = SIZE;
+      canvas.height = SIZE;
+      context = typeof canvas.getContext === "function" ? canvas.getContext("2d", { willReadFrequently: true }) : null;
+    } catch {
+      context = null;
+    }
+  }
+  if (!context) return true;
+  let result = true;
+  try {
+    context.clearRect(0, 0, SIZE, SIZE);
+    context.fillStyle = "#000";
+    context.textBaseline = "top";
+    context.font = `${SIZE - 4}px sans-serif`;
+    context.fillText(emoji, 0, 0);
+    const { data } = context.getImageData(0, 0, SIZE, SIZE);
+    result = false;
+    for (let i = 0; i < data.length; i += 4) {
+      const [r, g, b, a] = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+      if (a > 0 && (Math.abs(r - g) > 12 || Math.abs(g - b) > 12)) {
+        result = true;
+        break;
+      }
+    }
+  } catch {
+    result = true;
+  }
+  support.set(emoji, result);
+  return result;
+}
+function resetEmojiSupportCache() {
+  support.clear();
+  context = void 0;
+}
+function emojiPattern() {
+  try {
+    return new RegExp("\\p{RGI_Emoji}", "gv");
+  } catch {
+    return /\p{Regional_Indicator}{2}|(?:\p{Extended_Pictographic}|[#*0-9]️?⃣)(?:️|\p{Emoji_Modifier})*(?:‍\p{Extended_Pictographic}(?:️|\p{Emoji_Modifier})*)*/gu;
+  }
+}
+export {
+  canRenderEmoji,
+  emojiImageFileName,
+  emojiImageSrc,
+  emojiPattern,
+  normalizeEmojiImageBaseUrl,
+  resetEmojiSupportCache
+};

package/dist/emoji-model.d.ts

@@ -0,0 +1,66 @@
+type EmojiLocale = 'en' | 'de';
+interface EmojiEntry {
+    /** The Unicode emoji — the only form ever stored. */
+    emoji: string;
+    /** Localized name ("thumbs up" / "Daumen hoch"). */
+    name: string;
+    /** Localized search terms. */
+    tags: ReadonlyArray<string>;
+    /** Index into `EmojiData.groups`. */
+    group: number;
+}
+interface EmojiGroup {
+    key: string;
+    /** Localized category name. */
+    name: string;
+}
+interface EmojiData {
+    locale: EmojiLocale;
+    groups: ReadonlyArray<EmojiGroup>;
+    emojis: ReadonlyArray<EmojiEntry>;
+    /** Localized names by emoji, for aria-labels of quick picks and recents. */
+    names: ReadonlyMap<string, string>;
+}
+type EmojiDataLoader = (locale: EmojiLocale) => Promise<EmojiData>;
+/** Shape of `emojibase-data/<locale>/compact.json` entries (the fields we read). */
+interface CompactEmoji {
+    unicode: string;
+    label: string;
+    group?: number;
+    order?: number;
+    tags?: string[];
+}
+/** Shape of `emojibase-data/<locale>/messages.json` (the fields we read). */
+interface EmojiMessages {
+    groups: ReadonlyArray<{
+        key: string;
+        message: string;
+        order: number;
+    }>;
+}
+/** Build picker data from the emojibase JSON of one locale. */
+declare function buildEmojiData(locale: EmojiLocale, compact: ReadonlyArray<CompactEmoji>, messages: EmojiMessages): EmojiData;
+/**
+ * Default loader: dynamic imports of the emojibase JSON, one chunk per locale, cached.
+ * Requires the optional peer `emojibase-data`.
+ */
+declare const loadEmojiData: EmojiDataLoader;
+/**
+ * Search by name and tags. Word-prefix matches rank before substring matches;
+ * dataset order breaks ties. Case and diacritics are folded, so "uberr" finds "Überraschung".
+ */
+declare function searchEmoji(data: EmojiData, query: string, limit?: number): EmojiEntry[];
+declare const DEFAULT_RECENT_KEY = "uix-emoji-recent";
+/** Recently used emoji from localStorage; empty when storage is unavailable. */
+declare function readRecentEmoji(key?: string): string[];
+/** Move `emoji` to the front of the recent list and persist it (best effort). */
+declare function pushRecentEmoji(emoji: string, key?: string): string[];
+/**
+ * Next focus index in a grid of `count` cells with `columns` columns, for arrow keys,
+ * Home and End. Returns `null` for other keys.
+ */
+declare function emojiGridMove(index: number, key: string, count: number, columns: number): number | null;
+/** Fill `{name}` placeholders in a label template. */
+declare function formatLabel(template: string, values: Readonly<Record<string, string | number>>): string;
+
+export { type CompactEmoji, DEFAULT_RECENT_KEY, type EmojiData, type EmojiDataLoader, type EmojiEntry, type EmojiGroup, type EmojiLocale, type EmojiMessages, buildEmojiData, emojiGridMove, formatLabel, loadEmojiData, pushRecentEmoji, readRecentEmoji, searchEmoji };

package/dist/emoji-model.js

@@ -0,0 +1,108 @@
+const COMPONENT_GROUP_KEY = "component";
+const capitalize = (s) => s ? s[0].toLocaleUpperCase() + s.slice(1) : s;
+function buildEmojiData(locale, compact, messages) {
+  const sourceGroups = [...messages.groups].sort((a, b) => a.order - b.order);
+  const groups = [];
+  const groupIndex = /* @__PURE__ */ new Map();
+  for (const g of sourceGroups) {
+    if (g.key === COMPONENT_GROUP_KEY) continue;
+    groupIndex.set(g.order, groups.length);
+    groups.push({ key: g.key, name: capitalize(g.message) });
+  }
+  const emojis = [];
+  const names = /* @__PURE__ */ new Map();
+  const sorted = [...compact].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  for (const item of sorted) {
+    if (item.group === void 0) continue;
+    const group = groupIndex.get(item.group);
+    if (group === void 0) continue;
+    const entry = { emoji: item.unicode, name: item.label, tags: item.tags ?? [], group };
+    emojis.push(entry);
+    names.set(item.unicode, item.label);
+    names.set(item.unicode.replace(/️/g, ""), item.label);
+  }
+  return { locale, groups, emojis, names };
+}
+const cache = /* @__PURE__ */ new Map();
+const loadEmojiData = (locale) => {
+  let pending = cache.get(locale);
+  if (!pending) {
+    const files = locale === "de" ? Promise.all([import("emojibase-data/de/compact.json"), import("emojibase-data/de/messages.json")]) : Promise.all([import("emojibase-data/en/compact.json"), import("emojibase-data/en/messages.json")]);
+    pending = files.then(
+      ([compact, messages]) => buildEmojiData(
+        locale,
+        compact.default ?? compact,
+        messages.default ?? messages
+      )
+    );
+    pending.catch(() => cache.delete(locale));
+    cache.set(locale, pending);
+  }
+  return pending;
+};
+const fold = (s) => s.toLocaleLowerCase().normalize("NFD").replace(/\p{M}/gu, "");
+function searchEmoji(data, query, limit = 64) {
+  const q = fold(query.trim());
+  if (!q) return [];
+  const prefix = [];
+  const contains = [];
+  for (const entry of data.emojis) {
+    const name = fold(entry.name);
+    const words = [...name.split(/[\s:,-]+/), ...entry.tags.map(fold)];
+    if (words.some((w) => w.startsWith(q)) || name.startsWith(q)) prefix.push(entry);
+    else if (name.includes(q)) contains.push(entry);
+    if (prefix.length >= limit) break;
+  }
+  return [...prefix, ...contains].slice(0, limit);
+}
+const DEFAULT_RECENT_KEY = "uix-emoji-recent";
+const RECENT_MAX = 16;
+function readRecentEmoji(key = DEFAULT_RECENT_KEY) {
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    const list = raw ? JSON.parse(raw) : [];
+    return Array.isArray(list) ? list.filter((e) => typeof e === "string").slice(0, RECENT_MAX) : [];
+  } catch {
+    return [];
+  }
+}
+function pushRecentEmoji(emoji, key = DEFAULT_RECENT_KEY) {
+  const next = [emoji, ...readRecentEmoji(key).filter((e) => e !== emoji)].slice(0, RECENT_MAX);
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify(next));
+  } catch {
+  }
+  return next;
+}
+function emojiGridMove(index, key, count, columns) {
+  if (count === 0) return null;
+  switch (key) {
+    case "ArrowRight":
+      return Math.min(index + 1, count - 1);
+    case "ArrowLeft":
+      return Math.max(index - 1, 0);
+    case "ArrowDown":
+      return Math.min(index + columns, count - 1);
+    case "ArrowUp":
+      return index - columns < 0 ? null : index - columns;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+function formatLabel(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+}
+export {
+  DEFAULT_RECENT_KEY,
+  buildEmojiData,
+  emojiGridMove,
+  formatLabel,
+  loadEmojiData,
+  pushRecentEmoji,
+  readRecentEmoji,
+  searchEmoji
+};