@enigmax/primitives 0.22.0 → 0.24.0

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.22.0",
+  "version": "0.24.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"
@@ -77,9 +89,12 @@
     "./relative-time.css": "./recipes/relative-time/styles.css",
     "./toast.css": "./recipes/toast/styles.css",
     "./input.css": "./recipes/input/styles.css",
+    "./color.css": "./recipes/color/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 +158,15 @@
   },
   "keywords": [
     "carousel",
+    "color-picker",
+    "context-menu",
     "enigma",
     "flags",
     "fuse",
     "headless",
     "input",
     "marquee",
+    "menu",
     "network",
     "notifications",
     "password",
@@ -156,6 +174,9 @@
     "react",
     "relative-time",
     "search",
+    "select",
+    "selection",
+    "shortcuts",
     "toast",
     "unstyled",
     "vanilla"

package/recipes/color/styles.css

@@ -0,0 +1,143 @@
+/*
+ * The color stylesheet.
+ *
+ * GENERATED from src/react/input/color-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 input --copy`, or fork it outright.
+ */
+:root {
+    --enigma-color-panel-bg: #1c1c1c;
+    --enigma-color-panel-border: #333333;
+    --enigma-color-panel-radius: 0.625rem;
+    --enigma-color-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --enigma-color-panel-width: 13.5rem;
+    --enigma-color-text: #f5f5f5;
+    --enigma-color-muted: #a3a3a3;
+    --enigma-color-border: #404040;
+    --enigma-color-focus: #a3a3a3;
+    --enigma-color-area-height: 8rem;
+    --enigma-color-rail-height: 0.625rem;
+    --enigma-color-thumb: #ffffff;
+    --enigma-color-thumb-ring: rgba(0, 0, 0, 0.55);
+    /* The light square of the transparency chequerboard. The dark one is the surface it sits
+       on, which is why only one colour is a property. */
+    --enigma-color-checker: rgba(255, 255, 255, 0.22);
+    --enigma-color-checker-size: 0.5rem;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-color-panel-bg: #ffffff;
+        --enigma-color-panel-border: #e5e5e5;
+        --enigma-color-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        --enigma-color-text: #171717;
+        --enigma-color-muted: #737373;
+        --enigma-color-border: #d4d4d4;
+        --enigma-color-focus: #737373;
+        --enigma-color-thumb-ring: rgba(0, 0, 0, 0.35);
+        --enigma-color-checker: rgba(0, 0, 0, 0.14);
+    }
+}
+
+/* The anchor the panel hangs from. Inline so it sits in the field's own row, and the
+   positioning context so the panel needs no portal and no scroll listener: it moves with
+   the field because it is INSIDE it. */
+[data-enigma-color] { position: relative; display: inline-flex; flex: none; }
+
+[data-enigma-color-swatch] {
+    display: block; width: 1.25rem; height: 1.25rem; padding: 0;
+    background: none; border: 1px solid var(--enigma-color-border); border-radius: 0.3125rem;
+    cursor: pointer; overflow: hidden;
+}
+[data-enigma-color-swatch]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+[data-enigma-color-swatch]:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* The chequerboard, so a colour with alpha reads as transparent rather than as a lighter
+   colour - which is the whole difference between #ff000080 and #ff8080. */
+[data-enigma-color-checkers] {
+    background-image:
+        conic-gradient(var(--enigma-color-checker) 0 25%, transparent 0 50%, var(--enigma-color-checker) 0 75%, transparent 0);
+    background-size: var(--enigma-color-checker-size) var(--enigma-color-checker-size);
+}
+
+[data-enigma-color-fill] { display: block; width: 100%; height: 100%; }
+/* An unparseable field has no colour to show, so the swatch shows the chequerboard alone
+   rather than the last good colour: a stale swatch says the value is fine when it is not. */
+[data-enigma-color-swatch][data-invalid] [data-enigma-color-fill] { background: none; }
+
+[data-enigma-color-panel] {
+    position: absolute; z-index: 60; top: calc(100% + 0.375rem); left: 0;
+    display: grid; gap: 0.625rem;
+    box-sizing: border-box; width: var(--enigma-color-panel-width); padding: 0.625rem;
+    color: var(--enigma-color-text); background: var(--enigma-color-panel-bg);
+    border: 1px solid var(--enigma-color-panel-border);
+    border-radius: var(--enigma-color-panel-radius);
+    box-shadow: var(--enigma-color-panel-shadow);
+}
+/* Flipped when the field sits near the bottom of the window. Without it the panel opens off
+   the screen and the controls are unreachable, which is the same defect the select fixes. */
+[data-enigma-color-panel][data-side="top"] { top: auto; bottom: calc(100% + 0.375rem); }
+
+[data-enigma-color-area] {
+    position: relative; height: var(--enigma-color-area-height);
+    border-radius: 0.375rem; cursor: crosshair;
+    /* The drag IS the control here, so the page must not scroll under it. The marquee's
+       warning about touch-action is the opposite case: a full-width row still has to let the
+       page move. */
+    touch-action: none;
+    background:
+        linear-gradient(to top, #000000, rgba(0, 0, 0, 0)),
+        linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)),
+        hsl(var(--enigma-color-hue, 0), 100%, 50%);
+}
+[data-enigma-color-area]:focus-visible,
+[data-enigma-color-rail]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+
+[data-enigma-color-controls] { display: flex; align-items: center; gap: 0.5rem; }
+[data-enigma-color-rails] { display: grid; gap: 0.5rem; flex: 1; min-width: 0; }
+
+[data-enigma-color-rail] {
+    position: relative; height: var(--enigma-color-rail-height);
+    border-radius: 999px; cursor: pointer; touch-action: none;
+}
+[data-enigma-color-rail="hue"] {
+    background: linear-gradient(to right, #ff0000, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000);
+}
+[data-enigma-color-rail="alpha"] { background-image: none; }
+[data-enigma-color-rail="alpha"] [data-enigma-color-gradient] {
+    position: absolute; inset: 0; border-radius: inherit;
+    background: linear-gradient(to right, transparent, var(--enigma-color-opaque, #000000));
+}
+
+/* One handle for the square and the rails. It must never take the pointer: a press that
+   lands on the handle instead of the surface under it would start no drag at all. */
+[data-enigma-color-thumb] {
+    position: absolute; pointer-events: none;
+    width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem;
+    border: 2px solid var(--enigma-color-thumb); border-radius: 999px;
+    box-shadow: 0 0 0 1px var(--enigma-color-thumb-ring), inset 0 0 0 1px var(--enigma-color-thumb-ring);
+}
+[data-enigma-color-rail] [data-enigma-color-thumb] { top: 50%; }
+
+[data-enigma-color-preview] {
+    position: relative; flex: none; width: 1.75rem; height: 1.75rem;
+    border: 1px solid var(--enigma-color-border); border-radius: 999px; overflow: hidden;
+}
+
+[data-enigma-color-eyedropper] {
+    display: grid; place-items: center; flex: none;
+    width: 1.75rem; height: 1.75rem; padding: 0;
+    color: var(--enigma-color-muted); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.375rem; cursor: pointer;
+}
+[data-enigma-color-eyedropper]:hover { color: var(--enigma-color-text); }
+[data-enigma-color-eyedropper]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+
+[data-enigma-color-swatches] { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+[data-enigma-color-preset] {
+    width: 1.125rem; height: 1.125rem; padding: 0;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem; cursor: pointer;
+}
+[data-enigma-color-preset]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+[data-enigma-color-preset][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--enigma-color-focus); }

package/recipes/context-menu/styles.css

@@ -0,0 +1,185 @@
+/*
+ * 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; }
+/* No focus ring around the panel. It takes focus so the keyboard has somewhere to be, not
+   because it is a control: what MOVES is the highlighted row, drawn by [data-active] and
+   announced through aria-activedescendant. A ring around the whole menu says the menu is the
+   thing focused, which is not what is happening - and it appears the moment you press an
+   arrow, over a surface that was already showing you where you are. Nothing is lost by
+   removing it, because nothing inside is reachable by Tab: the menu owns that key. */
+[data-enigma-menu-panel]:focus,
+[data-enigma-menu-panel]:focus-visible { outline: none; }
+@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>
             )}