npm - @enigmax/primitives - Versions diffs - 0.23.0 → 0.25.0 - Mend

@enigmax/primitives 0.23.0 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/{chunk-KEVZ5XQV.js → chunk-3MGBZOAU.js} +50 -9
package/dist/{chunk-DSBYVA7V.js → chunk-DZMHY3SU.js} +73 -9
package/dist/chunk-KVLSOQTI.js +66 -0
package/dist/chunk-S2FPN5ID.js +115 -0
package/dist/{chunk-3BQVOOAM.js → chunk-Z3VDE7OA.js} +145 -1
package/dist/{context-menu-D3FtTn7v.d.ts → clipboard-menu-B_ouitfS.d.ts} +91 -1
package/dist/color-D_rZ83Oc.d.ts +152 -0
package/dist/color-T63FLJNH.js +515 -0
package/dist/{index-DQNnohoo.d.ts → index-qXOkYQCU.d.ts} +56 -4
package/dist/index.d.ts +2 -2
package/dist/index.js +2 -1
package/dist/next/index.d.ts +3 -3
package/dist/next/index.js +6 -4
package/dist/react/context-menu.d.ts +23 -6
package/dist/react/context-menu.js +2 -2
package/dist/react/index.d.ts +5 -5
package/dist/react/index.js +6 -4
package/dist/react/input.d.ts +2 -2
package/dist/react/input.js +2 -1
package/dist/react-router/index.d.ts +3 -3
package/dist/react-router/index.js +6 -4
package/package.json +3 -1
package/recipes/color/styles.css +163 -0
package/recipes/context-menu/styles.css +8 -0
package/registry.json +86 -7
package/src/core/clipboard-menu.ts +270 -0
package/src/core/color.ts +248 -0
package/src/index.ts +32 -0
package/src/react/context-menu/context.ts +9 -2
package/src/react/context-menu/index.tsx +14 -0
package/src/react/context-menu/root.tsx +132 -8
package/src/react/context-menu/styles.ts +8 -0
package/src/react/index.ts +32 -0
package/src/react/input/color-styles.ts +176 -0
package/src/react/input/color-swatch.tsx +96 -0
package/src/react/input/color.tsx +527 -0
package/src/react/input/index.tsx +77 -6
package/src/react/input/types.ts +63 -3
package/dist/password-C8lG4Zm9.d.ts +0 -71
/package/dist/{chunk-3HDEZ2E7.js → chunk-MSOCCQGH.js} +0 -0

package/src/react/context-menu/root.tsx CHANGED Viewed

@@ -6,6 +6,10 @@ import { shortenQuery } from "@/core/search";
 import { shortcutTokens } from "@/core/keys";
 import { CONTEXT_MENU_STYLES } from "@/react/context-menu/styles";
 import { ContextMenuContext, useContextMenuContext, type ContextMenuItem, type ContextMenuNode } from "@/react/context-menu/context";
+import {
+    CLIPBOARD_PREFIX, clipboardEntries, clipboardAction, clipboardHasText, inspectClipboardTarget, performClipboardAction,
+    type ClipboardMenuOptions, type ClipboardTarget
+} from "@/core/clipboard-menu";
 import {
     useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState,
     type ComponentPropsWithoutRef, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode
@@ -37,6 +41,41 @@ import {
  * that opened it. Rendered into `<body>`, it is subject to none of them.
  */
+/**
+ * The three glyphs the clipboard rows carry.
+ *
+ * Drawn here rather than imported: a menu whose caller gives every row an icon and whose
+ * built-in rows have none reads as three broken rows, and an icon file would be a request.
+ * Stroked with `currentColor` at 1em, so they inherit the row's colour and size.
+ */
+const CLIPBOARD_ICON = {
+    viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none",
+    stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round",
+    "aria-hidden": true
+} as const;
+const CLIPBOARD_ICONS = {
+    copy: (
+        <svg {...CLIPBOARD_ICON}>
+            <rect x="9" y="9" width="12" height="12" rx="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+    ),
+    cut: (
+        <svg {...CLIPBOARD_ICON}>
+            <circle cx="6" cy="6" r="3" />
+            <circle cx="6" cy="18" r="3" />
+            <path d="M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12" />
+        </svg>
+    ),
+    paste: (
+        <svg {...CLIPBOARD_ICON}>
+            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+            <rect x="8" y="2" width="8" height="4" rx="1" />
+        </svg>
+    )
+};
 let injected = false;
 /**
@@ -97,6 +136,16 @@ export interface ContextMenuRootProps {
     onOpenChange?: (open: boolean) => void;
     /** Nothing opens, and the press is left to the browser. For a disabled row or a read-only view. */
     disabled?: boolean;
+    /**
+     * Copy, Cut and Paste, built from whatever was right-clicked. ON by default, and `false`
+     * turns them off; an object turns off one of the three, renames them, or both.
+     *
+     * On by default because the browser's own menu has them and this one replaces it - a
+     * custom menu over a text field that cannot copy is a loss the visitor discovers rather
+     * than one anybody decided on. They appear only where they mean something: Copy over a
+     * selection, Cut over a selection in something writable, Paste in anything writable.
+     */
+    clipboard?: boolean | ClipboardMenuOptions;
     /** Fuse.js's constructor, for fuzzy filtering. Omit it for the built-in matcher. */
     fuse?: ContextMenuOptions["fuse"];
     fuseOptions?: Record<string, unknown>;
@@ -132,6 +181,7 @@ export function ContextMenuRoot(props: ContextMenuRootProps): ReactNode {
         loadingLabel = "Loading...",
         emptyLabel = "Nothing here.",
         styles = true,
+        clipboard = true,
         children
     } = props;
@@ -163,7 +213,14 @@ export function ContextMenuRoot(props: ContextMenuRootProps): ReactNode {
         matcher,
         searchKeys,
         cacheMs,
-        onSelect: (item, path) => latest.current.onSelect?.(item as ContextMenuItem, path),
+        onSelect: (item, path) => {
+            // Ours are performed here and STILL reported: the caller may want to log the
+            // copy, or undo it, and a row that reaches onSelect for every other item but
+            // these three would be a hole nobody expects.
+            const action = clipboardAction(item.id);
+            if (action) void performClipboardAction(action, clipboardTarget.current);
+            latest.current.onSelect?.(item as ContextMenuItem, path);
+        },
         onOpenChange: (open) => latest.current.onOpenChange?.(open)
         // Built once: rebuilding it would drop the open branch and the highlight on every
         // render. Every option below is pushed in through update().
@@ -217,9 +274,41 @@ export function ContextMenuRoot(props: ContextMenuRootProps): ReactNode {
     const currentItems = useRef(items);
     currentItems.current = items;
+    /* -------- the clipboard rows, and what they were built over -------- */
+    /**
+     * What the menu was opened over, and the rows that came out of it.
+     *
+     * Refs rather than state, and read at open time rather than derived: the selection and the
+     * caret belong to the DOM at the instant of the press, and a render later they are gone -
+     * choosing a row moves focus into the panel. Keeping them here also means the merge below
+     * never re-runs the inspection, so what is performed is what the rows were built from.
+     */
+    const clipboardTarget = useRef<ClipboardTarget>(inspectClipboardTarget(null));
+    const clipboardRows = useRef<ContextMenuEntry[]>([]);
+    const clipboardOptions = useMemo<ClipboardMenuOptions | null>(() => {
+        if (clipboard === false) return null;
+        return { icons: CLIPBOARD_ICONS, ...(clipboard === true ? {} : clipboard) };
+    }, [clipboard]);
+    /**
+     * The caller's rows with ours in front of them.
+     *
+     * In front because that is where every desktop menu puts them, and separated because they
+     * are about the SELECTION rather than about the thing the menu was opened on - two blocks
+     * with a rule between them, not one list where Copy sits next to Delete.
+     */
+    const withClipboard = useCallback((rows: readonly ContextMenuNode[]): readonly ContextMenuEntry[] => {
+        const clip = clipboardRows.current;
+        if (clip.length === 0) return rows as readonly ContextMenuEntry[];
+        if (rows.length === 0) return clip;
+        return [...clip, { type: "separator", id: `${CLIPBOARD_PREFIX}rule` }, ...(rows as readonly ContextMenuEntry[])];
+    }, []);
     useEffect(() => {
-        instance.update({ items: currentItems.current as readonly ContextMenuEntry[], title });
-    }, [instance, signature, title]);
+        instance.update({ items: withClipboard(currentItems.current), title });
+    }, [instance, signature, title, withClipboard]);
     const cancelClose = useCallback(() => { window.clearTimeout(closing.current); }, []);
@@ -230,11 +319,40 @@ export function ContextMenuRoot(props: ContextMenuRootProps): ReactNode {
     useEffect(() => cancelClose, [cancelClose]);
-    const open = useCallback((point: ContextMenuPoint): boolean => {
+    /**
+     * Open at a point, over `target` - whatever the press actually landed on.
+     *
+     * The rows are pushed in SYNCHRONOUSLY, before the menu opens: state would arrive a render
+     * too late and the first paint of the menu would be the one without them.
+     */
+    const open = useCallback((point: ContextMenuPoint, target?: EventTarget | null): boolean => {
         if (disabled) return false;
         cancelClose();
+        if (clipboardOptions) {
+            clipboardTarget.current = inspectClipboardTarget(target ?? null);
+            clipboardRows.current = clipboardEntries(clipboardTarget.current, clipboardOptions);
+            instance.update({ items: withClipboard(currentItems.current) });
+            /**
+             * And then, where the browser will say so without a prompt, whether there is
+             * anything to paste. It answers a microtask later at best, so Paste opens enabled
+             * and greys out if the clipboard turns out to be empty - the other way round would
+             * flash a disabled row on every menu that opens over a field.
+             */
+            if (clipboardRows.current.some((entry) => isAction(entry) && clipboardAction(entry.id) === "paste")) {
+                void clipboardHasText().then((has) => {
+                    if (has !== false || !instance.state.open) return;
+                    clipboardRows.current = clipboardRows.current.map((entry) => (
+                        isAction(entry) && clipboardAction(entry.id) === "paste" ? { ...entry, disabled: true } : entry
+                    ));
+                    instance.update({ items: withClipboard(currentItems.current) });
+                });
+            }
+        }
         return instance.open(point);
-    }, [instance, disabled, cancelClose]);
+    }, [instance, disabled, cancelClose, clipboardOptions, withClipboard]);
     const close = useCallback(() => {
         cancelClose();
@@ -409,14 +527,18 @@ export function ContextMenuTrigger({ asChild = false, longPress = true, children
                 if (event.defaultPrevented) return;
                 // The default is prevented only when a menu actually opened. With nothing to
                 // show, the browser's own menu is better than none - and than an empty box.
-                if (menu.open({ x: event.clientX, y: event.clientY })) event.preventDefault();
+                // The event TARGET, not the trigger: the clipboard rows are built from the
+                // field or the selection the press actually landed on, which is usually a
+                // descendant of the area this menu covers.
+                if (menu.open({ x: event.clientX, y: event.clientY }, event.target)) event.preventDefault();
             }}
             onPointerDown={(event: PointerEvent<HTMLDivElement>) => {
                 props.onPointerDown?.(event);
                 if (event.defaultPrevented || !longPress || event.pointerType !== "touch") return;
                 const { clientX: x, clientY: y } = event;
                 cancelPress();
-                press.current = { x, y, timer: window.setTimeout(() => { press.current = null; menu.open({ x, y }); }, LONG_PRESS_MS) };
+                const target = event.target;
+                press.current = { x, y, timer: window.setTimeout(() => { press.current = null; menu.open({ x, y }, target); }, LONG_PRESS_MS) };
             }}
             onPointerMove={(event: PointerEvent<HTMLDivElement>) => {
                 props.onPointerMove?.(event);
@@ -437,7 +559,9 @@ export function ContextMenuTrigger({ asChild = false, longPress = true, children
                 const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
                 // At the element's own corner, inset a little: a menu opened by key has no
                 // pointer to appear under, and the corner is where every platform puts it.
-                if (menu.open({ x: rect.left + 8, y: rect.top + 8 })) event.preventDefault();
+                // Opened by key, so what it is over is wherever the caret is - which is what
+                // a keyboard visitor means by "here".
+                if (menu.open({ x: rect.left + 8, y: rect.top + 8 }, document.activeElement)) event.preventDefault();
             }}
         >
             {children}

package/src/react/context-menu/styles.ts CHANGED Viewed

@@ -66,6 +66,14 @@ export const CONTEXT_MENU_STYLES = `
     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; }

package/src/react/index.ts CHANGED Viewed

@@ -19,13 +19,33 @@ export {
     type BreachChecker,
     type BreachState,
     type BreachStatus,
+    type ColorLabels,
+    type ColorPanelPlacement,
     type PasswordOnlyProps,
     type SearchOnlyProps,
+    type ColorOnlyProps,
     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";
+// The colour maths, for a form that has to read or write the value the picker produced. The
+// picker itself arrives through `<Input type="color">`, so nothing here reaches into its chunk.
+export {
+    parseColor,
+    formatColor,
+    toHex,
+    rgbToHsv,
+    hsvToRgb,
+    rgbToHsl,
+    hslToRgb,
+    colorEquals,
+    type Rgb,
+    type Hsv,
+    type Hsl,
+    type ColorFormat,
+    type FormatColorOptions
+} from "@/core/color";
 export { Slot, mergeSlotProps, type SlotProps } from "@/react/slot";
 export {
     generatePassword,
@@ -127,6 +147,18 @@ export {
     type ContextMenuNode,
     type ContextMenuContextValue
 } from "@/react/context-menu";
+export {
+    CLIPBOARD_PREFIX,
+    clipboardEntries,
+    clipboardAction,
+    clipboardHasText,
+    inspectClipboardTarget,
+    performClipboardAction,
+    type ClipboardAction,
+    type ClipboardTarget,
+    type ClipboardMenuOptions,
+    type ClipboardMenuLabels
+} from "@/core/clipboard-menu";
 export {
     createContextMenu,
     isAction,

package/src/react/input/color-styles.ts ADDED Viewed

@@ -0,0 +1,176 @@
+/**
+ * The colour picker's baseline look.
+ *
+ * The rest of `<Input>` ships no styles, and this one does, for the reason the select's sheet
+ * gives: an unstyled POPUP is not a plain-looking control, it is transparent boxes lying on
+ * top of the page. A saturation square with no size is nothing at all - there is no useful
+ * "unstyled" version of a gradient someone drags a handle across - so the panel arrives with
+ * a look, and `styles={false}` takes it away for anyone who wants to draw their own.
+ *
+ * A string rather than a stylesheet because the picker injects it. `scripts/sync-recipes.mjs`
+ * generates `recipes/color/styles.css` from here and CI fails when the two drift, so this
+ * module is the source and the `.css` is the copy for anyone who prefers an import.
+ *
+ * Everything below is a custom property or an attribute selector: override the properties on
+ * `:root` for a different-looking picker without writing a single selector. The sheet is
+ * PREPENDED to `<head>`, so anything the document already has wins on source order at equal
+ * specificity.
+ */
+export const COLOR_STYLES = `
+: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; }
+/* The value as text, with the notation beside it. Monospace on purpose: a hex whose digits
+   shift width as you drag is a value nobody can read at a glance. */
+[data-enigma-color-value] { display: flex; align-items: center; gap: 0.375rem; }
+[data-enigma-color-format] {
+    flex: none; padding: 0.3125rem 0.375rem;
+    font: inherit; font-size: 0.625rem; line-height: 1; letter-spacing: 0.06em;
+    color: var(--enigma-color-muted); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem; cursor: pointer;
+}
+[data-enigma-color-format]:hover { color: var(--enigma-color-text); }
+[data-enigma-color-input] {
+    flex: 1; min-width: 0; padding: 0.25rem 0.375rem;
+    font: inherit; font-family: var(--enigma-color-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 0.75rem; line-height: 1.4;
+    color: var(--enigma-color-text); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem;
+}
+[data-enigma-color-format]:focus-visible,
+[data-enigma-color-input]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 1px; }
+[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/src/react/input/color-swatch.tsx ADDED Viewed

@@ -0,0 +1,96 @@
+"use client";
+import type { CSSProperties, ReactNode, Ref } from "react";
+/**
+ * The swatch in the field, and the box the panel hangs from.
+ *
+ * Its own module, and deliberately NOT part of the picker's chunk. The picker is imported on
+ * demand, so a swatch that lived in there would not exist for as long as that request takes -
+ * the field renders as a bare text box, the affordance appears late and shifts the row, and a
+ * press in that window reaches nothing at all. On a fast connection that is a blink; on a
+ * cold cache it is the second or two somebody spends clicking a swatch that is not there yet.
+ *
+ * So the swatch ships with the field and the panel arrives behind it. It costs the markup
+ * below in the base chunk and no colour maths at all: the fill is handed to the browser, which
+ * is the only parser that already knows every notation a value could be written in.
+ */
+/**
+ * Enough of a look to be a swatch, for the frames before the panel's stylesheet exists.
+ *
+ * The sheet ships with the picker, so the swatch rendered ahead of it would otherwise be a
+ * default browser button for as long as that request takes - which trades a missing control
+ * for an ugly one. Written against the same custom properties, so a project that themed the
+ * picker themes this too, and dropped entirely the moment the real swatch replaces it.
+ */
+const BASELINE: CSSProperties = {
+    display: "block",
+    boxSizing: "border-box",
+    width: "1.25rem",
+    height: "1.25rem",
+    padding: 0,
+    background: "none",
+    border: "1px solid var(--enigma-color-border, #404040)",
+    borderRadius: "0.3125rem",
+    overflow: "hidden",
+    cursor: "pointer"
+};
+export interface ColorSwatchProps {
+    /** The value to paint, exactly as the field holds it. Anything unparseable paints nothing. */
+    value?: string;
+    /** Whether the panel is up, for `aria-expanded`. */
+    open?: boolean;
+    /** The value is not a colour: the swatch shows the chequerboard rather than a stale fill. */
+    invalid?: boolean;
+    /** The field is disabled or read-only. */
+    locked?: boolean;
+    label: string;
+    anchorRef?: Ref<HTMLSpanElement>;
+    buttonRef?: Ref<HTMLButtonElement>;
+    onPress?: () => void;
+    /** The picker's stylesheet has not arrived yet, so carry the few declarations it needs. */
+    baseline?: boolean;
+    /** The panel, once its code is here. */
+    children?: ReactNode;
+}
+export function ColorSwatch({ value, open = false, invalid = false, locked = false, label, anchorRef, buttonRef, onPress, baseline = false, children }: ColorSwatchProps): ReactNode {
+    return (
+        <span
+            ref={anchorRef}
+            data-enigma-color=""
+            data-open={open ? "" : undefined}
+            style={baseline ? { position: "relative", display: "inline-flex", flex: "none" } : undefined}
+        >
+            <button
+                ref={buttonRef}
+                // Never a bare `<button>`: inside a form it would default to submit, so opening
+                // the picker would post the half-filled form. The same trap the reveal has.
+                type="button"
+                data-enigma-color-swatch=""
+                data-enigma-color-checkers=""
+                data-invalid={invalid ? "" : undefined}
+                aria-haspopup="dialog"
+                aria-expanded={open}
+                aria-label={label}
+                title={label}
+                disabled={locked}
+                style={baseline ? BASELINE : undefined}
+                onClick={onPress}
+            >
+                {/* The browser parses the value for us: an unparseable string simply applies
+                    nothing, which is why the swatch needs no colour maths to fall back on. */}
+                <span
+                    data-enigma-color-fill=""
+                    style={{
+                        background: invalid ? undefined : value,
+                        ...(baseline ? { display: "block", width: "100%", height: "100%" } : null)
+                    }}
+                />
+            </button>
+            {children}
+        </span>
+    );
+}