@enigmax/primitives 0.17.0 → 0.18.0

package/src/core/flags.ts

@@ -8,12 +8,14 @@
  * out of them looks broken to those readers, with nothing in the code to explain why.
  * There is no font stack that fixes it, so the fix is not a font: it is an image.
  *
- * Two upstream sets, both SVG, both installable or served from a CDN:
+ * Three sets, all SVG, all served by enigma itself:
  *
- * - `rect` / `square` - lipis/flag-icons (`flags/4x3`, `flags/1x1`), the classic
- *   rectangular set, 271 flags plus subdivisions.
- * - `circle` - HatScripts/circle-flags (`flags/*.svg` on its gh-pages branch), 445 round
- *   flags, which is what a flag next to an avatar or inside a chip usually wants.
+ * - `rect` (4:3) and `square` (1:1) - the classic rectangular artwork.
+ * - `circle` - round, which is what a flag next to an avatar or inside a chip wants.
+ *
+ * They are served from enigma's own tree rather than from anyone else's, because a
+ * component whose default source is a third party is a component that breaks when that
+ * third party moves, renames a branch, or goes away.
  *
  * Nothing here touches the DOM, so it renders on a server.
  */
@@ -21,26 +23,24 @@
 export type FlagShape = "rect" | "square" | "circle";
 
 /**
- * `svg` is the only format the two upstreams publish, so it is the only one a CDN can
- * serve. `png` and `webp` exist for a LOCAL set (`enigma add flags --flags local
- * --flag-formats webp`), which rasterises what it downloads, and for a mirror of your own.
+ * `svg` is what the sets are stored as, so it is what a remote source can serve. `png` and
+ * `webp` exist for a LOCAL set (`enigma add flags --flags local --flag-formats webp`), which
+ * rasterises what it downloads, and for a mirror of your own.
  */
 export type FlagFormat = "svg" | "png" | "webp";
 
 /**
  * Where the files come from.
  *
- * - `"cdn"` - jsDelivr, straight from the two upstream projects. Nothing to install.
+ * - `"cdn"` - enigma's own artwork, over a CDN. Nothing to install.
  * - `"local"` - files under `basePath` in your own public directory.
- * - any URL - a mirror of your own with the same layout as the local one
+ * - any URL - a mirror of your own with the same layout
  *   (`<base>/<shape>/<code>.<format>`), which is exactly the tree the downloader writes.
  */
 export type FlagSource = "cdn" | "local" | (string & {});
 
-/** Pinned so an upgrade upstream is a decision here, never a surprise in production. */
-export const FLAG_ICONS_VERSION = "7.5.0";
-/** circle-flags publishes from a branch, not a tag; gh-pages is its default branch. */
-export const CIRCLE_FLAGS_REF = "gh-pages";
+/** enigma's own artwork, over a CDN. Every source shares this layout. */
+export const FLAG_CDN = "https://cdn.jsdelivr.net/gh/FJRG2007/enigma@main/assets/flags";
 
 export interface FlagOptions {
     shape?: FlagShape;
@@ -50,10 +50,16 @@ export interface FlagOptions {
     basePath?: string;
     /** Rendered HEIGHT in px. The width follows the shape's ratio. Default 16. */
     size?: number;
+    /**
+     * Language the automatic name is written in. Left out, it follows the document's own
+     * `lang`, which is what a translated page wants.
+     */
+    locale?: string;
 }
 
-export interface FlagConfig extends Required<Omit<FlagOptions, "size">> {
+export interface FlagConfig extends Required<Omit<FlagOptions, "size" | "locale">> {
     size: number;
+    locale?: string;
 }
 
 const DEFAULTS: FlagConfig = {
@@ -96,12 +102,14 @@ const EMOJI_FLAG = /^[\u{1F1E6}-\u{1F1FF}]{2}$/u;
  * A BCP 47 tag whose region is spelled the way the standard spells it: UPPERCASE. That
  * casing is the whole discriminator, and it has to be read before the value is lowercased -
  * `es-ES` is Spanish-in-Spain and means the flag `es`, while `es-ct` is a subdivision code
- * both sets publish (Catalonia) and means the file `es-ct`. Lowercasing first makes those
+ * the sets publish (Catalonia) and means the file `es-ct`. Lowercasing first makes those
  * two the same string, and then one of them is always wrong.
  */
 const LOCALE_TAG = /^([A-Za-z]{2,3})[-_]([A-Z]{2})$/;
-/** What the two sets actually name their files: `es`, `gb-eng`, `au-nsw`, `easter_island`. */
+/** What the sets actually name their files: `es`, `gb-eng`, `au-nsw`, `easter_island`. */
 const FILE_CODE = /^[a-z]{2,}(?:[-_][a-z0-9]+)*$/;
+/** A plain country: exactly the shape `Intl.DisplayNames` can put a name to. */
+const COUNTRY_CODE = /^[a-z]{2}$/;
 
 /**
  * Anything a codebase calls a country into the file name the sets use, or null.
@@ -128,21 +136,48 @@ export function normalizeFlagCode(value: string | null | undefined): string | nu
     return FILE_CODE.test(code) ? code : null;
 }
 
+/**
+ * The country's name, in the reader's language, or null.
+ *
+ * `Intl.DisplayNames` is the whole implementation: the names are in the runtime already,
+ * translated, and maintained by whoever maintains the platform - so this ships no table of
+ * 250 country names to go stale, and a Spanish page says "España" without being told.
+ *
+ * Null for anything it cannot name, and that is deliberate for SUBDIVISIONS: `gb-eng` is
+ * England, and falling back to the region (`gb`, "United Kingdom") would put a confidently
+ * wrong name on the flag. A name nobody can source is worse than no name.
+ */
+export function flagName(code: string | null | undefined, locale?: string): string | null {
+    const normalized = normalizeFlagCode(code);
+    if (!normalized || !COUNTRY_CODE.test(normalized)) return null;
+    const region = normalized.toUpperCase();
+    try {
+        const names = new Intl.DisplayNames([locale ?? documentLocale() ?? "en"], { type: "region" });
+        const name = names.of(region);
+        // It echoes the input back when it has no name for the code.
+        return !name || name === region ? null : name;
+    } catch {
+        return null;
+    }
+}
+
+/** The page's own language, which is what a translated page wants the name written in. */
+function documentLocale(): string | undefined {
+    if (typeof document === "undefined") return undefined;
+    return document.documentElement.lang || undefined;
+}
+
 /** Everything a renderer needs, computed in one pass. Null when the code is unusable. */
 export interface FlagView {
-    /** The upstream file name, e.g. `es`, `gb-eng`. */
+    /** The file name, e.g. `es`, `gb-eng`. */
     code: string;
     src: string;
     shape: FlagShape;
     format: FlagFormat;
     width: number;
     height: number;
-}
-
-function cdnUrl(code: string, shape: FlagShape): string {
-    if (shape === "circle") return `https://cdn.jsdelivr.net/gh/HatScripts/circle-flags@${CIRCLE_FLAGS_REF}/flags/${code}.svg`;
-    const size = shape === "square" ? "1x1" : "4x3";
-    return `https://cdn.jsdelivr.net/npm/flag-icons@${FLAG_ICONS_VERSION}/flags/${size}/${code}.svg`;
+    /** The automatic name, when there is one. */
+    name: string | null;
 }
 
 /** One warning per process, not one per flag: a list of 200 would print 200 times. */
@@ -151,32 +186,32 @@ let warnedAboutFormat = false;
 /**
  * The URL for one flag. Null when the code cannot be resolved.
  *
- * A raster format asked of the CDN falls back to SVG rather than producing a 404: neither
- * upstream publishes anything but SVG, so `format: "webp"` is only meaningful against a
- * local set or a mirror. It says so once, in development, instead of silently disagreeing
- * with what the call site asked for.
+ * A raster format asked of the CDN falls back to SVG rather than producing a 404: the sets
+ * are stored as SVG, so `format: "webp"` is only meaningful against a local set or a mirror.
+ * It says so once, in development, instead of silently disagreeing with the call site.
  */
 export function flagSrc(code: string | null | undefined, options: FlagOptions = {}): string | null {
     const settings = { ...config, ...options };
     const normalized = normalizeFlagCode(code);
     if (!normalized) return null;
 
-    const remoteCdn = settings.source === "cdn";
+    const remote = settings.source === "cdn";
     let format = settings.format;
-    if (remoteCdn && format !== "svg") {
+    if (remote && format !== "svg") {
         if (!warnedAboutFormat && typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
             warnedAboutFormat = true;
-            console.warn(`[enigma/flags] The flag CDNs publish SVG only, so "${format}" was served as SVG. Download a local set for raster formats: enigma add flags --flags local --flag-formats ${format}`);
+            console.warn(`[enigma/flags] The flags are served as SVG, so "${format}" was served as SVG. Download a local set for raster formats: enigma add flags --flags local --flag-formats ${format}`);
         }
         format = "svg";
     }
-    if (remoteCdn) return cdnUrl(normalized, settings.shape);
 
-    const base = (settings.source === "local" ? settings.basePath : settings.source).replace(/\/+$/, "");
+    // One layout everywhere - `<base>/<shape>/<code>.<format>` - so a mirror is the same
+    // string with a different host, and the downloader writes exactly what this reads.
+    const base = remote ? FLAG_CDN : (settings.source === "local" ? settings.basePath : settings.source).replace(/\/+$/, "");
     return `${base}/${settings.shape}/${normalized}.${format}`;
 }
 
-/** `flagSrc` plus the resolved geometry, for a renderer that has to size the box. */
+/** `flagSrc` plus the resolved geometry and name, for a renderer that has to size the box. */
 export function flagView(code: string | null | undefined, options: FlagOptions = {}): FlagView | null {
     const settings = { ...config, ...options };
     const normalized = normalizeFlagCode(code);
@@ -189,25 +224,36 @@ export function flagView(code: string | null | undefined, options: FlagOptions =
         shape: settings.shape,
         format: settings.source === "cdn" ? "svg" : settings.format,
         width: Math.round(height * FLAG_RATIO[settings.shape]),
-        height
+        height,
+        name: flagName(normalized, settings.locale)
     };
 }
 
+export interface FlagAttributeOptions extends FlagOptions {
+    /** Your own accessible name, which wins over the automatic one. */
+    label?: string;
+    /**
+     * Beside a country name that is already on screen, the flag is decoration and repeating
+     * the name only makes a screen reader say it twice.
+     */
+    decorative?: boolean;
+}
+
 /**
  * Attributes for a plain `<img>`, for vanilla, Astro and any template language.
  *
- * `label` is the accessible name and there is no default for it: a flag with no label is
- * DECORATIVE (empty alt, `aria-hidden`), which is correct beside a country name and is the
- * common case. Inventing one from the code would put "ES" or "es" into a screen reader,
- * and a country name guessed in the reader's wrong language is worse than silence.
+ * The accessible name is AUTOMATIC: the country's own name, in the reader's language, from
+ * `Intl.DisplayNames`. `label` replaces it and `decorative` drops it. Nothing is ever
+ * invented - a subdivision the platform cannot name, or a runtime without `Intl`, renders
+ * as decoration rather than putting a bare "ES" into a screen reader.
  */
-export function flagAttributes(code: string | null | undefined, options: FlagOptions & { label?: string; } = {}): Record<string, string | number> | null {
+export function flagAttributes(code: string | null | undefined, options: FlagAttributeOptions = {}): Record<string, string | number> | null {
     const view = flagView(code, options);
     if (!view) return null;
-    const label = options.label?.trim();
+    const label = options.decorative ? "" : options.label?.trim() || view.name || "";
     return {
         src: view.src,
-        alt: label ?? "",
+        alt: label,
         width: view.width,
         height: view.height,
         loading: "lazy",

package/src/core/input-icons.ts

@@ -0,0 +1,34 @@
+/**
+ * The icon shapes both renderers draw.
+ *
+ * Their own module because the React field imports NOTHING else from the vanilla adapter:
+ * pulling `createInput` in for two arrays of path data put the whole imperative renderer
+ * into every React bundle, for a component that never calls it.
+ */
+
+/**
+ * The built-in glyphs, as path data.
+ *
+ * Path data rather than markup because there are two renderers: this file writes an SVG
+ * string into a button it created, and the React component builds elements. Keeping the
+ * shapes here means one definition, and a theme that replaces an icon replaces it in both.
+ * Everything is stroked with `currentColor` at 1em, so an icon inherits the field's text.
+ */
+export const INPUT_ICON_PATHS = {
+    eye: ["M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z", "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"],
+    eyeOff: [
+        "M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2A17.7 17.7 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-.9",
+        "m2 2 20 20",
+        "M9.9 9.9a3 3 0 0 0 4.2 4.2"
+    ],
+    generate: ["m12 3 1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9Z", "M19 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z"],
+    /** Clears a search field. The platform draws one only in WebKit, and not on mobile. */
+    clear: ["m6 6 12 12", "m18 6-12 12"],
+    search: ["M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Z", "m20 20-4.2-4.2"]
+} as const;
+
+/** The same shapes as a standalone SVG string, for the DOM renderer below. */
+export function iconMarkup(paths: readonly string[]): string {
+    const body = paths.map((path) => `<path d="${path}"/>`).join("");
+    return `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+}

package/src/core/input.ts

@@ -73,28 +73,12 @@ export interface InputInstance {
 }
 
 /**
- * The built-in glyphs, as path data.
- *
- * Path data rather than markup because there are two renderers: this file writes an SVG
- * string into a button it created, and the React component builds elements. Keeping the
- * shapes here means one definition, and a theme that replaces an icon replaces it in both.
- * Everything is stroked with `currentColor` at 1em, so an icon inherits the field's text.
+ * The icons live in their own module so the React field can take them without taking this
+ * whole adapter with it. Re-exported here because they were part of this module's API
+ * before the split, and moving an export is a breaking change for no gain.
  */
-export const INPUT_ICON_PATHS = {
-    eye: ["M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z", "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"],
-    eyeOff: [
-        "M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2A17.7 17.7 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-.9",
-        "m2 2 20 20",
-        "M9.9 9.9a3 3 0 0 0 4.2 4.2"
-    ],
-    generate: ["m12 3 1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9Z", "M19 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z"]
-} as const;
-
-/** The same shapes as a standalone SVG string, for the DOM renderer below. */
-export function iconMarkup(paths: readonly string[]): string {
-    const body = paths.map((path) => `<path d="${path}"/>`).join("");
-    return `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
-}
+export { INPUT_ICON_PATHS, iconMarkup } from "@/core/input-icons";
+import { INPUT_ICON_PATHS, iconMarkup } from "@/core/input-icons";
 
 const EYE = iconMarkup(INPUT_ICON_PATHS.eye);
 const EYE_OFF = iconMarkup(INPUT_ICON_PATHS.eyeOff);

package/src/index.ts

@@ -31,13 +31,13 @@ export {
     flagSrc,
     flagView,
     flagAttributes,
+    flagName,
     normalizeFlagCode,
     configureFlags,
     flagConfig,
     resetFlagConfig,
     FLAG_RATIO,
-    FLAG_ICONS_VERSION,
-    CIRCLE_FLAGS_REF,
+    FLAG_CDN,
     type FlagOptions,
     type FlagConfig,
     type FlagView,

package/src/react/button.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { Slot } from "@/react/slot";
 import { useButton } from "@/react/use-button";
 import { getLinkComponent } from "@/react/link";
 import type { ButtonOptions, ButtonState } from "@/core/button";
-import { createElement, forwardRef, type ComponentPropsWithoutRef, type ElementType, type ReactNode } from "react";
+import { createElement, forwardRef, isValidElement, type ComponentPropsWithoutRef, type ElementType, type ReactNode } from "react";
 
 /**
  * `<Button>` - the component, for the ninety percent.
@@ -51,6 +52,49 @@ export interface ButtonProps extends ButtonOptions, Omit<ComponentPropsWithoutRe
     pending?: ReactNode;
     /** `type` on a real button. Ignored on a link, which has none. */
     type?: "button" | "submit" | "reset";
+    /**
+     * Show the shortcut as a key badge after the label, the way Stripe writes
+     * "Create invoice n".
+     *
+     * `"auto"` (the default) shows it when there is a shortcut AND the label renders text:
+     * beside a lone glyph on an icon-only button the badge is noise, and it would double the
+     * width of the smallest control on the screen. `true` and `false` decide it outright.
+     */
+    shortcutHint?: boolean | "auto";
+    /** Render the badge yourself. Return null to drop it for one button. */
+    renderShortcut?: (key: string) => ReactNode;
+    /**
+     * Put the behaviour on YOUR element instead of ours - a `motion.button`, your design
+     * system's button, a router Link, anything.
+     *
+     * ```tsx
+     * <Button asChild cooldown={30_000} onPress={resend}>
+     *     <motion.button whileTap={{ scale: 0.98 }}>Resend</motion.button>
+     * </Button>
+     * ```
+     *
+     * The child owns its own markup, so the shortcut badge is not injected - the child is
+     * rendered exactly as written. Read `state.shortcut` from `useButton` to place your own.
+     */
+    asChild?: boolean;
+}
+
+/**
+ * Whether a label renders any TEXT.
+ *
+ * Walked rather than assumed: `<Button shortcut="s"><Icon /></Button>` and
+ * `<Button shortcut="s"><Icon /> Save</Button>` differ only in a string buried in the tree,
+ * and that string is the whole difference between a hint and a decoration. An element whose
+ * text arrives from somewhere this cannot see reports false, so `auto` errs towards the
+ * quieter button; `shortcutHint` overrides it in one word.
+ */
+function hasText(node: ReactNode): boolean {
+    if (node === null || node === undefined || typeof node === "boolean") return false;
+    if (typeof node === "string") return node.trim().length > 0;
+    if (typeof node === "number") return true;
+    if (Array.isArray(node)) return node.some(hasText);
+    if (isValidElement(node)) return hasText((node.props as { children?: ReactNode; }).children);
+    return false;
 }
 
 export const Button = forwardRef<HTMLElement, ButtonProps>(function Button({
@@ -66,6 +110,9 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button({
     onClick,
     onChange,
     type = "button",
+    shortcutHint = "auto",
+    renderShortcut,
+    asChild = false,
     ...rest
 }, ref) {
     const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress: onPress ?? onClick, onChange });
@@ -75,17 +122,36 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button({
     // to setLinkComponent - and a plain <a> when nothing was. The package cannot import a
     // router itself, so registering one is what turns every href into a client navigation
     // without a word at the call site.
-    const Tag: ElementType = as ?? (state.element === "a" ? getLinkComponent() : "button");
+    const Tag: ElementType = asChild ? Slot : as ?? (state.element === "a" ? getLinkComponent() : "button");
 
     // `type="button"` is the default on purpose. A bare <button> inside a form submits it,
-    // so an action button that forgot it posts the form instead of doing its job.
+    // so an action button that forgot it posts the form instead of doing its job. Never
+    // injected through a slot: the child may be an anchor or a div, where `type` is either
+    // invalid or means something else entirely.
     const native = Tag === "button" ? { type } : {};
 
     const label = typeof children === "function" ? children(state) : children;
+    const content = state.loading && pending !== undefined ? pending : label;
+
+    // Not while it is working: the label has already been replaced by whatever `pending`
+    // says, and a key that does nothing right now is not a hint.
+    // Never through a slot: it takes exactly one child, and a second one would throw.
+    const showHint = !asChild && Boolean(state.shortcut) && !state.loading &&
+        (shortcutHint === "auto" ? hasText(content) : shortcutHint);
+    const hint = showHint && state.shortcut
+        ? renderShortcut?.(state.shortcut) ?? createElement(
+            "kbd",
+            // Hidden from the accessible name - the button already carries
+            // `aria-keyshortcuts`, and "Save n" is not what anyone wants read out.
+            { "data-enigma-button-key": "", "aria-hidden": true },
+            state.shortcut
+        )
+        : null;
 
     return createElement(
         Tag,
         { ref, ...button.props, ...native, ...rest },
-        state.loading && pending !== undefined ? pending : label
+        content,
+        hint
     );
 });

package/src/react/flag.tsx

@@ -7,10 +7,17 @@ export interface FlagProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "sr
     /** `es`, `ES`, `en-GB`, `gb-eng`, or the emoji flag you are replacing. */
     code: string | null | undefined;
     /**
-     * The accessible name. Leave it out and the flag is decorative, which is what it is
-     * beside a country name - the reader hears the name once instead of twice.
+     * Your own accessible name. Left out, the country's own name is used, in the reader's
+     * language - so a flag standing on its own is never a silent image.
      */
     label?: string;
+    /**
+     * Beside a country name that is already on screen the flag is decoration, and repeating
+     * the name only makes a screen reader say it twice.
+     */
+    decorative?: boolean;
+    /** Language the automatic name is written in. Follows the document's `lang` otherwise. */
+    locale?: string;
     shape?: FlagShape;
     format?: FlagFormat;
     source?: FlagSource;
@@ -28,8 +35,8 @@ export interface FlagProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "sr
  * The defaults come from `configureFlags`, so moving the whole application from the CDN to
  * a downloaded set is one line at startup and no change at any call site.
  */
-export function Flag({ code, label, shape, format, source, basePath, size, fallback = null, ...rest }: FlagProps): ReactNode {
-    const options: FlagOptions = { shape, format, source, basePath, size };
+export function Flag({ code, label, decorative = false, locale, shape, format, source, basePath, size, fallback = null, ...rest }: FlagProps): ReactNode {
+    const options: FlagOptions = { shape, format, source, basePath, size, locale };
     // An explicit `undefined` prop must not beat the configured default, so the unset ones
     // are dropped rather than spread over the config.
     for (const key of Object.keys(options) as (keyof FlagOptions)[]) {
@@ -39,16 +46,21 @@ export function Flag({ code, label, shape, format, source, basePath, size, fallb
     const view = flagView(code, options);
     if (!view) return fallback;
 
-    const name = label?.trim();
+    // Automatic unless told otherwise: the country's own name, in the reader's language.
+    const name = decorative ? "" : label?.trim() || view.name || "";
     return (
         <img
             src={view.src}
-            alt={name ?? ""}
+            alt={name}
             width={view.width}
             height={view.height}
             loading="lazy"
             decoding="async"
             aria-hidden={name ? undefined : true}
+            // The name comes from the reader's own runtime, so a server render and its
+            // hydration can legitimately disagree on the language it is written in. Same
+            // escape hatch, and same reason, as the relative timestamp.
+            suppressHydrationWarning
             data-enigma-flag=""
             data-flag-code={view.code}
             data-flag-shape={view.shape}

package/src/react/index.ts

@@ -10,16 +10,23 @@ export { useButton, type UseButtonResult } from "@/react/use-button";
 export { Button, type ButtonProps } from "@/react/button";
 export { setLinkComponent, getLinkComponent } from "@/react/link";
 export { type ButtonOptions, type ButtonState } from "@/core/button";
+export { Input } from "@/react/input";
 export {
-    Input,
-    PasswordStrength,
     type InputProps,
-    type PasswordStrengthProps,
+    type InputBaseProps,
+    type InputType,
     type FieldAction,
     type BreachChecker,
     type BreachState,
-    type BreachStatus
-} from "@/react/input";
+    type BreachStatus,
+    type PasswordOnlyProps,
+    type SearchOnlyProps,
+    type PlainOnlyProps
+} from "@/react/input/types";
+// The meter as a standalone component, for a form that renders it somewhere else. Re-exported
+// from the chunk rather than through `Input`, so importing only `Input` leaves it behind.
+export { PasswordStrength, type PasswordStrengthProps } from "@/react/input/password";
+export { Slot, mergeSlotProps, type SlotProps } from "@/react/slot";
 export {
     generatePassword,
     estimatePasswordStrength,
@@ -38,6 +45,7 @@ export {
     flagSrc,
     flagView,
     flagAttributes,
+    flagName,
     normalizeFlagCode,
     configureFlags,
     type FlagOptions,
@@ -45,3 +53,30 @@ export {
     type FlagFormat,
     type FlagSource
 } from "@/core/flags";
+export {
+    SearchPalette,
+    PaletteRoot,
+    PaletteTrigger,
+    PaletteContent,
+    PaletteField,
+    PaletteList,
+    PaletteItem,
+    PaletteFooter,
+    usePaletteContext,
+    type SearchPaletteProps,
+    type PaletteRootProps,
+    type PaletteListProps,
+    type PaletteSection,
+    type PaletteRow,
+    type PaletteContextValue
+} from "@/react/palette";
+export {
+    createRecentStore,
+    recentKey,
+    groupRows,
+    moveActive,
+    shortcutLabel,
+    isPaletteShortcut,
+    type RecentEntry,
+    type RecentStore
+} from "@/core/palette";

package/src/react/input/icon.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+/**
+ * The built-in glyphs, drawn from the shared path data.
+ *
+ * Stroked with `currentColor` at 1em, so an icon inherits the field's text colour and size
+ * and needs no styling of its own. Replacing one is a `FieldAction` with the same `name`.
+ */
+const ICON_PROPS = {
+    viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none",
+    stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round",
+    "aria-hidden": true
+} as const;
+
+export function Icon({ paths }: { paths: readonly string[]; }): ReactNode {
+    return <svg {...ICON_PROPS}>{paths.map((path) => <path key={path} d={path} />)}</svg>;
+}