@enigmax/primitives 0.21.0 → 0.23.0

package/dist/react-router/index.js

@@ -1,29 +1,36 @@
 "use client";
-export { useInput } from '../chunk-U3V4EHOB.js';
+export { useInput } from '../chunk-3HDEZ2E7.js';
+export { RelativeTime } from '../chunk-OCMI7R6H.js';
 export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
+export { ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-DSBYVA7V.js';
+export { SelectionList, useSelection } from '../chunk-N6PDHMAX.js';
+import { Button } from '../chunk-6BGBYUSZ.js';
+export { getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
 export { Flag } from '../chunk-NPHRS2Q7.js';
-export { Toaster } from '../chunk-JCCL7XKC.js';
+export { Toaster, toast, useSonner } from '../chunk-WPTBURIC.js';
+export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
 export { useMarquee } from '../chunk-ZWR2EXHQ.js';
-export { useSearch } from '../chunk-QQFNAKMY.js';
+export { useSearch } from '../chunk-45UHLZYT.js';
 export { useNetworkState } from '../chunk-S653GLSF.js';
-export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
-export { RelativeTime } from '../chunk-OCMI7R6H.js';
 import '../chunk-KJINGUQN.js';
+import '../chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
+export { createContextMenu, isAction } from '../chunk-3BQVOOAM.js';
+export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from '../chunk-WSQC3PCC.js';
+import '../chunk-MMQPZGSU.js';
 export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
+import '../chunk-SNYUBXWQ.js';
 import '../chunk-UOSSNUSC.js';
 import '../chunk-2QFTRNAZ.js';
-import '../chunk-SNYUBXWQ.js';
-import '../chunk-IXVMRVD4.js';
-export { Input } from '../chunk-R4ZAEE7V.js';
+export { Input } from '../chunk-KEVZ5XQV.js';
 import '../chunk-F25CGNQC.js';
-export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FWVWX67R.js';
-export { createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel } from '../chunk-DTWZDONY.js';
-import '../chunk-D5A2ZMAG.js';
-import { Button } from '../chunk-6BGBYUSZ.js';
-export { getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
-import '../chunk-MMQPZGSU.js';
+export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';
+export { Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext } from '../chunk-VKL3DEIQ.js';
+export { createSelect } from '../chunk-NONGREXC.js';
+export { isApplePlatform, matchesShortcut, parseShortcut, shortcutText, shortcutTokens } from '../chunk-4VUHQFAT.js';
 export { Slot, mergeSlotProps } from '../chunk-HS3X3XCW.js';
+export { createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel } from '../chunk-DTWZDONY.js';
+export { shortenQuery } from '../chunk-4ZPMP47J.js';
 import { Link } from 'react-router';
 import { forwardRef, createElement } from 'react';
 

package/dist/search/index.d.ts

@@ -1,5 +1,5 @@
-import { c as SearchOptions, S as SearchInstance } from '../search-DXxY8SEH.js';
-export { b as SearchMatch } from '../search-DXxY8SEH.js';
+import { c as SearchOptions, S as SearchInstance } from '../search-DYgqRp37.js';
+export { b as SearchMatch } from '../search-DYgqRp37.js';
 
 /**
  * Search with Fuse.js already wired: the batteries-included entry point.

package/dist/search/index.js

@@ -1,4 +1,4 @@
-import { createSearch } from '../chunk-D5A2ZMAG.js';
+import { createSearch } from '../chunk-4ZPMP47J.js';
 import Fuse from 'fuse.js';
 
 function createSearch2(options = {}) {

package/dist/{search-DXxY8SEH.d.ts → search-DYgqRp37.d.ts}

@@ -17,10 +17,15 @@ interface SearchMatch<T> {
 }
 /** The shape of Fuse's constructor, declared here so the package need not depend on it. */
 interface FuseLike<T> {
-    search(query: string): {
+    /**
+     * Readonly arrays, because Fuse's own signature returns them - and a mutable array is
+     * not assignable to one, so the stricter shape made `fuse={Fuse}` a type error at the
+     * call site while working perfectly at runtime.
+     */
+    search(query: string): readonly {
         item: T;
         score?: number;
-        matches?: {
+        matches?: readonly {
             key?: string;
         }[];
     }[];
@@ -77,6 +82,18 @@ interface SearchInstance<T> {
  * match something four words away.
  */
 declare function subsequenceMatcher<T>(keys?: string[]): NonNullable<SearchOptions<T>["matcher"]>;
+/**
+ * A query, short enough to put back on the screen.
+ *
+ * Every empty state quotes what was typed - "Nothing matches ..." - and what was typed is
+ * arbitrary: paste sixty characters with no spaces in them and there is no break opportunity
+ * in the whole string, so the panel grows to fit it and keeps growing. Cut in the TEXT and
+ * not only in CSS, because `text-overflow` needs a bounded box and the box is what the
+ * string is stretching.
+ *
+ * The tail is what identifies a typo, so the start is what survives.
+ */
+declare function shortenQuery(query: string, max?: number): string;
 declare function createSearch<T>(options?: SearchOptions<T>): SearchInstance<T>;
 
-export { type FuseConstructor as F, type SearchInstance as S, type FuseLike as a, type SearchMatch as b, type SearchOptions as c, createSearch as d, subsequenceMatcher as s };
+export { type FuseConstructor as F, type SearchInstance as S, type FuseLike as a, type SearchMatch as b, type SearchOptions as c, createSearch as d, subsequenceMatcher as e, shortenQuery as s };

package/dist/{search-UQEXAPQB.js → search-PBZORZ7P.js}

@@ -1,4 +1,4 @@
-import { createSearch } from './chunk-D5A2ZMAG.js';
+import { createSearch } from './chunk-4ZPMP47J.js';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/select-ClSy-J1f.d.ts

@@ -0,0 +1,100 @@
+import { F as FuseConstructor, c as SearchOptions } from './search-DYgqRp37.js';
+
+/**
+ * The parts of a select that are not rendering: what is chosen, what is visible after the
+ * filter, and where the highlight goes when a key is pressed.
+ *
+ * Framework-agnostic on purpose - the React layer over this file is thin, and a renderer
+ * that is not React only has to draw. The two hard parts of a select live here: a selection
+ * that behaves the same whether one value or many are allowed, and a highlight that never
+ * lands on a disabled row.
+ *
+ * Filtering reuses the search core, so a select filters exactly like the search field does:
+ * accent-insensitive substring by default, Fuse.js when you hand over its constructor, or
+ * your own matcher. Fuse is never imported here - it is a peer the caller passes or not.
+ */
+
+interface SelectOption {
+    /** What ends up in `value`. Unique within the list. */
+    value: string;
+    /** What is read and what the filter searches. */
+    label: string;
+    /** A second line under the label. Searched as well. */
+    description?: string;
+    /**
+     * Anything the renderer can draw beside the label - a ReactNode, an URL, a name. Typed
+     * as `unknown` because a core shared by every adapter cannot know what a node is.
+     */
+    icon?: unknown;
+    /** Visible, listed, announced as unavailable, and never selectable or highlightable. */
+    disabled?: boolean;
+    /** Rows carrying the same group render together under its name. */
+    group?: string;
+    /** Extra words the filter should match - synonyms, an old name, a code. */
+    keywords?: string[];
+}
+/** The fields the filter reads when the caller does not say. */
+declare const SELECT_SEARCH_KEYS: string[];
+interface SelectOptions {
+    options?: readonly SelectOption[];
+    /** A string, a list when `multiple`, or null for nothing chosen. */
+    value?: string | readonly string[] | null;
+    multiple?: boolean;
+    /** Filter the list from a field inside the panel. */
+    searchable?: boolean;
+    /** Fuse.js's constructor, for fuzzy filtering. Omit it for the built-in matcher. */
+    fuse?: FuseConstructor;
+    fuseOptions?: Record<string, unknown>;
+    matcher?: SearchOptions<SelectOption>["matcher"];
+    searchKeys?: string[];
+    /** Close after a choice. Default: true when one value is allowed, false when many are. */
+    closeOnSelect?: boolean;
+    /** Every state change. */
+    onChange?: (state: SelectState) => void;
+    /**
+     * Only the value, in the shape the caller asked for: a string, or a list when
+     * `multiple`. The React layer narrows this per mode, so a call site never has to
+     * widen it back by hand.
+     */
+    onValueChange?: (value: string | string[], options: SelectOption[]) => void;
+}
+interface SelectState {
+    open: boolean;
+    query: string;
+    /** Index into `visible`. -1 when there is nothing to highlight. */
+    active: number;
+    /** What the panel shows: every option, or what survived the filter. */
+    visible: SelectOption[];
+    /** The chosen options, in the order they were chosen. */
+    selected: SelectOption[];
+    /** The chosen values, always as a list - `multiple` decides what is reported outwards. */
+    value: string[];
+    multiple: boolean;
+    /** True when a filter is running and matched nothing. */
+    empty: boolean;
+}
+interface SelectInstance {
+    readonly state: SelectState;
+    setOpen(open: boolean): void;
+    toggleOpen(): void;
+    setQuery(query: string): void;
+    /** Move the highlight, skipping disabled rows. */
+    move(key: SelectMoveKey): void;
+    setActive(index: number): void;
+    /** Choose a row: replaces the value, or toggles it when many are allowed. */
+    select(value: string): void;
+    /** Choose whatever is highlighted. */
+    selectActive(): void;
+    /** Drop one value. The × on a tag. */
+    remove(value: string): void;
+    clear(): void;
+    /** Jump to the row starting with what was typed, the way a native select does. */
+    typeahead(character: string): void;
+    update(options: Partial<SelectOptions>): void;
+    subscribe(listener: (state: SelectState) => void): () => void;
+    destroy(): void;
+}
+type SelectMoveKey = "ArrowDown" | "ArrowUp" | "Home" | "End" | "PageDown" | "PageUp";
+declare function createSelect(options?: SelectOptions): SelectInstance;
+
+export { SELECT_SEARCH_KEYS as S, type SelectInstance as a, type SelectMoveKey as b, type SelectOption as c, type SelectOptions as d, type SelectState as e, createSelect as f };

package/dist/selection-B_pmzHpy.d.ts

@@ -0,0 +1,150 @@
+import { b as ShortcutSpec, a as ShortcutEvent } from './keys-D2zJs1uB.js';
+
+/**
+ * The parts of a selectable list that are not rendering: what is selected, where the cursor
+ * is, which row the next Shift+click measures from, and which command a key press stands for.
+ *
+ * This is the file-manager selection model, on purpose and in full: a plain click replaces
+ * the selection, Ctrl toggles one row without losing the rest, Shift takes everything between
+ * the anchor and here, Ctrl+Shift adds that range to what was already there, Ctrl+A takes the
+ * lot and Escape drops it. Every one of those is a rule people already know from Explorer,
+ * Finder and every list built on them, and every one of them is a bug when a list re-invents
+ * it - a Shift+click that measures from the last CLICK instead of the anchor, a Ctrl+click
+ * that clears the selection, an Escape that does nothing.
+ *
+ * The commands are DATA. Each one has a default binding, any of them can be rebound, removed
+ * one at a time or turned off altogether, and a binding that is not a built-in command is
+ * still matched and reported - so a list can add "star" on Mod+D without this file knowing
+ * what starring is.
+ */
+
+/**
+ * What a key press means.
+ *
+ * The first group the list PERFORMS - it owns the selection, so it moves it. The second it
+ * only REPORTS, because deleting, renaming and opening are the caller's. Both are reported,
+ * and both can be stopped by the handler, so a list that wants to confirm a delete or animate
+ * its own select-all can.
+ */
+type SelectionCommand = "selectAll" | "clear" | "invert" | "moveUp" | "moveDown" | "moveLeft" | "moveRight" | "moveHome" | "moveEnd" | "movePageUp" | "movePageDown" | "extendUp" | "extendDown" | "extendLeft" | "extendRight" | "extendHome" | "extendEnd" | "extendPageUp" | "extendPageDown" | "cursorUp" | "cursorDown" | "toggleCursor" | "open" | "rename" | "delete" | "deletePermanent" | "copy" | "cut" | "paste";
+/** A command name: one of the built-ins, or anything else the caller binds. */
+type SelectionCommandName = SelectionCommand | (string & {});
+/**
+ * What each command is bound to out of the box.
+ *
+ * `Mod` is Command on an Apple keyboard and Control everywhere else, which is what these
+ * shortcuts mean on both. `invert` ships unbound deliberately: Explorer has the action and no
+ * key for it, and inventing one would take a combination the page may already use.
+ */
+declare const DEFAULT_SELECTION_SHORTCUTS: Readonly<Record<SelectionCommand, ShortcutSpec>>;
+/**
+ * The bindings, as the caller writes them.
+ *
+ * A missing entry keeps the default, `false` removes that one command, and a string or a list
+ * replaces it. `shortcuts: false` on the options removes every one of them at once - for a
+ * list inside an editor, or one whose keyboard belongs to something else.
+ */
+type SelectionShortcuts = Partial<Record<SelectionCommandName, ShortcutSpec>>;
+/** The modifiers a click carried. A real MouseEvent or PointerEvent satisfies it. */
+interface SelectionClickModifiers {
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+}
+interface SelectionCommandEvent<Item> {
+    command: SelectionCommandName;
+    /**
+     * What the command applies to: everything selected, or the row under the cursor when
+     * nothing is. That fallback is the file-manager rule - pressing Delete with one row
+     * focused and none selected deletes that row.
+     */
+    items: Item[];
+    ids: string[];
+    /** The row the cursor is on, selected or not. */
+    cursor: Item | null;
+    cursorIndex: number;
+    /** The press that matched, for a handler that needs the modifiers back. */
+    event: ShortcutEvent;
+    /** Stop what the list would have done - the moves, select-all, clear, invert. */
+    preventDefault(): void;
+    defaultPrevented: boolean;
+}
+interface SelectionOptions<Item> {
+    items?: readonly Item[];
+    /** How a row is identified across reorders and reloads. Default: its index, as a string. */
+    getId?: (item: Item, index: number) => string;
+    /** A row that cannot be selected or landed on. Still rendered, still counted. */
+    disabled?: (item: Item, index: number) => boolean;
+    /** One row at a time: Ctrl and Shift stop meaning anything. Default: many. */
+    multiple?: boolean;
+    /** Columns in a grid, so Left and Right move by one and Up and Down by a row. Default 1. */
+    columns?: number;
+    /** How far PageUp and PageDown jump. Default 10. */
+    page?: number;
+    /** Rebind, remove or extend the commands. `false` removes every binding. */
+    shortcuts?: SelectionShortcuts | false;
+    /** A command matched a press. Fired for built-ins too, before the list acts on them. */
+    onCommand?: (event: SelectionCommandEvent<Item>) => void;
+    /** Every state change. */
+    onChange?: (state: SelectionState<Item>) => void;
+    /** Only the selection, when it actually changed. */
+    onSelectionChange?: (ids: string[], items: Item[]) => void;
+}
+interface SelectionState<Item> {
+    /** Selected ids, in the order the rows appear - not the order they were clicked. */
+    selected: string[];
+    /** The same ids, for a renderer that asks per row. */
+    selectedSet: ReadonlySet<string>;
+    /** The selected rows themselves. */
+    items: Item[];
+    /** Where the keyboard is. -1 when the list has not been touched. */
+    cursor: number;
+    /** Where the next Shift+click or Shift+arrow measures from. */
+    anchor: number;
+    count: number;
+    /** Every selectable row is selected. What a header checkbox reads. */
+    allSelected: boolean;
+    /** Some but not all - the third state of that same checkbox. */
+    partiallySelected: boolean;
+    /** A rubber band is being dragged. */
+    marquee: boolean;
+}
+interface SelectionInstance<Item> {
+    readonly state: SelectionState<Item>;
+    /** A click on a row, with its modifiers. The whole Explorer rule, in one call. */
+    click(index: number, modifiers?: SelectionClickModifiers): void;
+    /** A key press. Returns whether a command matched, so the caller knows to prevent it. */
+    keyDown(event: ShortcutEvent): boolean;
+    select(ids: readonly string[]): void;
+    selectIndex(index: number, additive?: boolean): void;
+    toggle(index: number): void;
+    /** Everything from the anchor to here. `additive` keeps what was already selected. */
+    selectRange(index: number, additive?: boolean): void;
+    selectAll(): void;
+    clear(): void;
+    invert(): void;
+    /** Move the cursor. `extend` takes everything from the anchor, `carry` leaves the selection alone. */
+    moveCursor(delta: number, extend?: boolean, carry?: boolean): void;
+    setCursor(index: number): void;
+    /**
+     * What an action on this row applies to: the selection when the row is part of it, and the
+     * row alone when it is not. The rule every file manager's context menu follows - and the
+     * one that makes right-clicking outside a selection act on what was clicked.
+     */
+    targets(index: number): Item[];
+    /** Start a rubber band. `additive` keeps the current selection as its base. */
+    beginMarquee(additive?: boolean): void;
+    /** The rows the band currently covers. */
+    marqueeTo(indices: readonly number[]): void;
+    endMarquee(): void;
+    /** The resolved bindings, so a menu can print the same shortcut the list listens for. */
+    bindings(): Record<string, ShortcutSpec>;
+    /** What one command is bound to, or false when it has no binding. */
+    binding(command: SelectionCommandName): ShortcutSpec;
+    update(options: Partial<SelectionOptions<Item>>): void;
+    subscribe(listener: (state: SelectionState<Item>) => void): () => void;
+    destroy(): void;
+}
+declare function createSelection<Item>(options?: SelectionOptions<Item>): SelectionInstance<Item>;
+
+export { DEFAULT_SELECTION_SHORTCUTS as D, type SelectionClickModifiers as S, type SelectionCommand as a, type SelectionCommandEvent as b, type SelectionCommandName as c, type SelectionInstance as d, type SelectionOptions as e, type SelectionShortcuts as f, type SelectionState as g, createSelection as h };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "sideEffects": [
@@ -25,6 +25,18 @@
       "types": "./dist/react/palette.d.ts",
       "import": "./dist/react/palette.js"
     },
+    "./react/select": {
+      "types": "./dist/react/select.d.ts",
+      "import": "./dist/react/select.js"
+    },
+    "./react/context-menu": {
+      "types": "./dist/react/context-menu.d.ts",
+      "import": "./dist/react/context-menu.js"
+    },
+    "./react/selection": {
+      "types": "./dist/react/selection.d.ts",
+      "import": "./dist/react/selection.js"
+    },
     "./react/button": {
       "types": "./dist/react/button.d.ts",
       "import": "./dist/react/button.js"
@@ -79,7 +91,9 @@
     "./input.css": "./recipes/input/styles.css",
     "./marquee.css": "./recipes/marquee/styles.css",
     "./logo-marquee.css": "./recipes/logo-marquee/styles.css",
-    "./palette.css": "./recipes/palette/styles.css"
+    "./palette.css": "./recipes/palette/styles.css",
+    "./select.css": "./recipes/select/styles.css",
+    "./context-menu.css": "./recipes/context-menu/styles.css"
   },
   "scripts": {
     "build": "tsup",
@@ -143,12 +157,14 @@
   },
   "keywords": [
     "carousel",
+    "context-menu",
     "enigma",
     "flags",
     "fuse",
     "headless",
     "input",
     "marquee",
+    "menu",
     "network",
     "notifications",
     "password",
@@ -156,6 +172,9 @@
     "react",
     "relative-time",
     "search",
+    "select",
+    "selection",
+    "shortcuts",
     "toast",
     "unstyled",
     "vanilla"

package/recipes/context-menu/styles.css

@@ -0,0 +1,177 @@
+/*
+ * The context-menu stylesheet.
+ *
+ * GENERATED from src/react/context-menu/styles.ts by scripts/sync-recipes.mjs - edit that file, not
+ * this one. It exists as a stylesheet as well as a string because the component injects it,
+ * and this is the same sheet for anyone who would rather import it, copy it with
+ * `enigma add context-menu --copy`, or fork it outright.
+ */
+:root {
+    --enigma-menu-bg: #1c1c1c;
+    --enigma-menu-border: #333333;
+    --enigma-menu-radius: 0.625rem;
+    --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --enigma-menu-text: #f5f5f5;
+    --enigma-menu-muted: #a3a3a3;
+    --enigma-menu-font-size: 0.8125rem;
+    --enigma-menu-min-width: 12rem;
+    --enigma-menu-max-height: 20rem;
+
+    --enigma-menu-active-bg: #2a2a2a;
+    --enigma-menu-accent: #fbbf24;
+    --enigma-menu-danger: #f87171;
+    --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-menu-bg: #ffffff;
+        --enigma-menu-border: #e5e5e5;
+        --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        --enigma-menu-text: #171717;
+        --enigma-menu-muted: #737373;
+        --enigma-menu-active-bg: #f5f5f5;
+        --enigma-menu-accent: #b45309;
+        --enigma-menu-danger: #b91c1c;
+        --enigma-menu-danger-bg: rgba(185, 28, 28, 0.08);
+    }
+}
+
+/* Every panel is positioned in VIEWPORT coordinates, which is what a pointer event reports
+   and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling
+   ancestor cannot drag it away from the place it was opened. */
+[data-enigma-menu-panel] {
+    position: fixed; z-index: 60;
+    box-sizing: border-box;
+    min-width: var(--enigma-menu-min-width);
+    max-width: min(22rem, calc(100vw - 1rem));
+    padding: 0.25rem;
+    color: var(--enigma-menu-text);
+    background: var(--enigma-menu-bg);
+    border: 1px solid var(--enigma-menu-border);
+    border-radius: var(--enigma-menu-radius);
+    box-shadow: var(--enigma-menu-shadow);
+    font-size: var(--enigma-menu-font-size);
+    animation: enigma-menu-in 90ms ease-out;
+    /* Measured before it is placed, and placed before it is seen: without this the panel is
+       painted at 0,0 for one frame and jumps to the pointer on the next. */
+    visibility: hidden;
+}
+[data-enigma-menu-panel][data-placed] { visibility: visible; }
+@keyframes enigma-menu-in {
+    from { opacity: 0; transform: scale(0.98); }
+    to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-menu-panel] { animation: none; }
+}
+
+/* The heading: what the menu is acting ON. A long file name is cut rather than allowed to
+   set the panel's width, and the full one stays reachable through its title attribute. */
+[data-enigma-menu-title] {
+    margin: 0; padding: 0.375rem 0.5rem 0.25rem;
+    font-size: 0.6875rem; font-weight: 600;
+    color: var(--enigma-menu-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-menu-search] {
+    width: 100%; box-sizing: border-box;
+    padding: 0.375rem 0.5rem 0.5rem;
+    font: inherit; font-size: var(--enigma-menu-font-size);
+    color: var(--enigma-menu-text); background: transparent;
+    border: 0; border-bottom: 1px solid var(--enigma-menu-border);
+    outline: none;
+}
+[data-enigma-menu-search]::-webkit-search-cancel-button,
+[data-enigma-menu-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
+
+[data-enigma-menu-list] {
+    max-height: var(--enigma-menu-max-height);
+    overflow-y: auto; overscroll-behavior: contain;
+}
+
+[data-enigma-menu-item] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.3125rem 0.5rem; border-radius: 0.375rem;
+    line-height: 1.4;
+    color: var(--enigma-menu-text);
+    /* The hand, not the arrow. A native menu uses the arrow because the whole surface is
+       drawn by the OS and nothing on a page looks like it; here the rows sit on a web page,
+       where the hand is what says "this is a thing you press". */
+    cursor: pointer; user-select: none;
+}
+[data-enigma-menu-item][data-active] { background: var(--enigma-menu-active-bg); }
+[data-enigma-menu-item][data-disabled] { opacity: 0.45; cursor: not-allowed; }
+[data-enigma-menu-item][data-destructive] { color: var(--enigma-menu-danger); }
+[data-enigma-menu-item][data-destructive][data-active] { background: var(--enigma-menu-danger-bg); }
+
+[data-enigma-menu-item-text] { display: grid; min-width: 0; }
+[data-enigma-menu-item-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+[data-enigma-menu-item-description] {
+    font-size: 0.6875rem; color: var(--enigma-menu-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-menu-icon] { display: inline-flex; align-items: center; flex: none; width: 1rem; max-height: 1.25em; line-height: 0; }
+
+/* The shortcut, on the right, the way every desktop menu prints it. margin-left: auto is
+   what pushes it there, and flex: none is what stops a long label squashing it. */
+[data-enigma-menu-shortcut] {
+    display: flex; align-items: center; gap: 0.125rem;
+    flex: none; margin-left: auto; padding-left: 1.5rem;
+    font-size: 0.6875rem; color: var(--enigma-menu-muted);
+    font-variant-numeric: tabular-nums;
+}
+[data-enigma-menu-shortcut] kbd { font: inherit; }
+
+/* The submenu arrow shares the shortcut's slot, so a row never has both pushed apart. */
+[data-enigma-menu-arrow] {
+    flex: none; margin-left: auto;
+    width: 0.35rem; height: 0.35rem;
+    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
+    transform: rotate(45deg);
+    opacity: 0.6;
+}
+[data-enigma-menu-shortcut] + [data-enigma-menu-arrow] { margin-left: 0.5rem; }
+
+/* Check and radio: drawn rather than loaded, and reserving their space either way so
+   choosing a row does not shift the label under the pointer. */
+[data-enigma-menu-check] {
+    flex: none; width: 1rem; height: 1rem;
+    display: grid; place-items: center;
+    color: var(--enigma-menu-accent);
+}
+[data-enigma-menu-check]::after { content: ""; width: 0.35rem; height: 0.6rem; opacity: 0; }
+[data-enigma-menu-item][aria-checked="true"] [data-enigma-menu-check]::after {
+    opacity: 1;
+    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
+    transform: rotate(45deg) translate(-0.05rem, -0.05rem);
+}
+[data-enigma-menu-item][role="menuitemradio"] [data-enigma-menu-check]::after {
+    width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor;
+    transform: none; border: 0;
+}
+
+[data-enigma-menu-separator] {
+    height: 1px; margin: 0.25rem 0.25rem;
+    background: var(--enigma-menu-border);
+}
+
+[data-enigma-menu-label] {
+    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;
+    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
+    color: var(--enigma-menu-muted);
+}
+
+[data-enigma-menu-status] {
+    margin: 0; padding: 0.625rem 0.5rem;
+    font-size: var(--enigma-menu-font-size); color: var(--enigma-menu-muted);
+    /* The quoted query is cut in the text as well, but a pasted string with no spaces has no
+       break opportunity at all - so this is what stops it stretching the panel. */
+    overflow-wrap: anywhere;
+}
+[data-enigma-menu-status][data-error] { color: var(--enigma-menu-danger); }
+
+/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */
+[data-enigma-menu-more] { height: 1px; }

package/recipes/input/styles.css

@@ -57,6 +57,15 @@
     background: transparent; border: 0; outline: none;
 }
 
+/* The platform's own clear button, gone. A search field here already renders one - so
+   WebKit draws a SECOND cross next to it, and only in WebKit, which makes it a duplicate
+   half the visitors see and the other half never do. */
+[data-enigma-input]::-webkit-search-cancel-button,
+[data-enigma-input]::-webkit-search-decoration,
+[data-enigma-input]::-webkit-search-results-button {
+    -webkit-appearance: none; appearance: none; display: none;
+}
+
 /* A breached password is worth showing on the field itself, not only in the message. */
 [data-enigma-input-root][data-breached] [data-enigma-input-field] { border-color: var(--enigma-input-danger); }
 

package/recipes/palette/styles.css

@@ -214,6 +214,9 @@
     text-align: center;
     color: var(--enigma-palette-muted);
     font-size: 0.875rem;
+    /* It quotes the query, and a pasted string with no spaces in it has no break
+       opportunity: without this it runs out of the panel rather than wrapping. */
+    overflow-wrap: anywhere;
 }
 
 [data-enigma-palette-footer] {

package/recipes/search/tailwind.tsx

@@ -1,6 +1,6 @@
 import Fuse from "fuse.js";
 import type { ReactNode } from "react";
-import { useSearch } from "@enigmax/primitives/react";
+import { useSearch, shortenQuery } from "@enigmax/primitives/react";
 
 /**
  * A styled search field with its result list, yours to edit.
@@ -46,12 +46,13 @@ export function Search<T>({
                     rounded-lg border border-neutral-700 bg-neutral-900 px-3 py-2.5
                     text-sm text-neutral-100 outline-none
                     placeholder:text-neutral-500 focus:border-neutral-400
+                    [&::-webkit-search-cancel-button]:appearance-none
                 "
             />
 
             {query && (
                 <p className="font-mono text-[11px] text-neutral-500">
-                    {results.length} result{results.length === 1 ? "" : "s"} for &quot;{query}&quot;
+                    {results.length} result{results.length === 1 ? "" : "s"} for &quot;{shortenQuery(query)}&quot;
                 </p>
             )}