@enigmax/primitives 0.24.0 → 0.26.0

package/src/react/input/color-swatch.tsx

@@ -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>
+    );
+}

package/src/react/input/color.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { writeValue } from "@/react/input/write-value";
+import { ColorSwatch } from "@/react/input/color-swatch";
 import { COLOR_STYLES } from "@/react/input/color-styles";
 import type { ColorLabels, ColorPanelPlacement } from "@/react/input/types";
 import { parseColor, formatColor, rgbToHsv, hsvToRgb, toHex, colorEquals, type Hsv, type ColorFormat } from "@/core/color";
@@ -47,6 +48,10 @@ const STEP = { fine: 0.01, coarse: 0.1, hue: 1, hueCoarse: 10 };
 /** Kept clear of the window edge when deciding which side to open on. */
 const MARGIN = 12;
 
+/** The notations the readout cycles through, in the order the button steps over them. */
+const FORMATS: ColorFormat[] = ["hex", "rgb", "hsl"];
+const FORMAT_LABELS: Record<ColorFormat, string> = { hex: "HEX", rgb: "RGB", hsl: "HSL" };
+
 let injected = false;
 
 function injectStyles(): void {
@@ -76,6 +81,11 @@ export interface ColorExtrasProps {
     styles?: boolean;
     /** The field is disabled or read-only: the swatch is inert and the panel never opens. */
     locked?: boolean;
+    /**
+     * The swatch was already pressed, while this module was still being fetched. Opens the
+     * panel on the first render rather than asking for the press a second time.
+     */
+    openOnMount?: boolean;
     labels?: ColorLabels;
 }
 
@@ -89,6 +99,7 @@ export function ColorExtras({
     placement = "auto",
     styles = true,
     locked = false,
+    openOnMount = false,
     labels
 }: ColorExtrasProps): ReactNode {
     // Before paint: a sheet applied after the first frame shows the panel unstyled first.
@@ -99,7 +110,7 @@ export function ColorExtras({
     const swatchRef = useRef<HTMLButtonElement | null>(null);
     const areaRef = useRef<HTMLDivElement | null>(null);
 
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(openOnMount && !locked);
     const [side, setSide] = useState<"top" | "bottom">(placement === "top" ? "top" : "bottom");
 
     const parsed = useMemo(() => parseColor(value), [value]);
@@ -296,6 +307,33 @@ export function ColorExtras({
         }
     }, [commit, hsv]);
 
+    /* -------- the readout, which is the value in whichever notation you want to read it -------- */
+
+    /**
+     * Which notation the panel PRINTS the colour in, and only that.
+     *
+     * `format` is the caller's contract - the spelling their column, their API or their CSS
+     * expects - so cycling this button never changes what is written into the field. It
+     * changes what you can read out of the panel and paste elsewhere, which is what the
+     * browser's own picker offers and what a picker showing no code at all cannot.
+     */
+    const [shown, setShown] = useState<ColorFormat>(format);
+    useEffect(() => setShown(format), [format]);
+
+    /** What is being typed, while it is being typed. Null means "show the current colour". */
+    const [draft, setDraft] = useState<string | null>(null);
+
+    const readout = useMemo(() => formatColor(rgb, shown, { alpha }), [rgb, shown, alpha]);
+    const nextFormat = FORMATS[(FORMATS.indexOf(shown) + 1) % FORMATS.length] as ColorFormat;
+
+    const typed = useCallback((next: string) => {
+        setDraft(next);
+        const colour = parseColor(next);
+        // Applied as it becomes a colour, so the square and the rails follow a pasted value
+        // rather than waiting for a blur. Half-typed text simply is not one yet.
+        if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
+    }, [commit, alpha, hsv.h]);
+
     /* -------- rendering -------- */
 
     const css = useMemo(() => formatColor(rgb, "hex", { alpha: true }), [rgb]);
@@ -306,27 +344,16 @@ export function ColorExtras({
     const panelStyle = { "--enigma-color-hue": Math.round(hsv.h), "--enigma-color-opaque": opaque } as CSSProperties;
 
     return (
-        <span ref={anchorRef} data-enigma-color="" data-open={open ? "" : undefined}>
-            <button
-                ref={swatchRef}
-                // 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={parsed ? undefined : ""}
-                aria-haspopup="dialog"
-                aria-expanded={open}
-                aria-label={text.open ?? "Pick a colour"}
-                title={text.open ?? "Pick a colour"}
-                disabled={locked}
-                onClick={() => (open ? close(true) : setOpenState(true))}
-            >
-                {/* 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: parsed ? css : undefined }} />
-            </button>
-
+        <ColorSwatch
+            anchorRef={anchorRef}
+            buttonRef={swatchRef}
+            value={css}
+            invalid={!parsed}
+            open={open}
+            locked={locked}
+            label={text.open ?? "Pick a colour"}
+            onPress={() => (open ? close(true) : setOpenState(true))}
+        >
             {open && !locked && (
                 <div
                     ref={panelRef}
@@ -421,6 +448,40 @@ export function ColorExtras({
                         </div>
                     </div>
 
+                    {/* The colour as text, editable, with the notation next to it. A picker
+                        that shows no code is one you cannot read a value out of, cannot paste
+                        one into, and cannot check against the hex somebody sent you. */}
+                    <div data-enigma-color-value="">
+                        <button
+                            type="button"
+                            data-enigma-color-format=""
+                            aria-label={`${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`}
+                            title={`${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`}
+                            onClick={() => { setShown(nextFormat); setDraft(null); }}
+                        >
+                            {FORMAT_LABELS[shown]}
+                        </button>
+                        <input
+                            type="text"
+                            data-enigma-color-input=""
+                            value={draft ?? readout}
+                            aria-label={text.value ?? "Colour value"}
+                            spellCheck={false}
+                            autoComplete="off"
+                            autoCorrect="off"
+                            autoCapitalize="off"
+                            onChange={(event) => typed(event.target.value)}
+                            // What was typed goes back to the canonical spelling the moment the
+                            // field is left, the way the input itself normalizes on blur.
+                            onBlur={() => setDraft(null)}
+                            onKeyDown={(event) => {
+                                if (event.key !== "Enter") return;
+                                event.preventDefault();
+                                setDraft(null);
+                            }}
+                        />
+                    </div>
+
                     {swatches && swatches.length > 0 && (
                         <div data-enigma-color-swatches="" role="group" aria-label={text.swatches ?? "Preset colours"}>
                             {swatches.map((preset) => {
@@ -445,7 +506,7 @@ export function ColorExtras({
                     )}
                 </div>
             )}
-        </span>
+        </ColorSwatch>
     );
 }
 

package/src/react/input/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Icon } from "@/react/input/icon";
+import { ColorSwatch } from "@/react/input/color-swatch";
 import { INPUT_ICON_PATHS } from "@/core/input-icons";
 import { writeValue } from "@/react/input/write-value";
 import type { AnyInputProps, InputProps, FieldAction, BreachState } from "@/react/input/types";
@@ -96,6 +97,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
     const innerRef = useRef<HTMLInputElement | null>(null);
     const [element, setElement] = useState<HTMLInputElement | null>(null);
     const [revealed, setRevealed] = useState(false);
+    /**
+     * The swatch was pressed before the picker's code arrived.
+     *
+     * Remembered rather than dropped: the press was a request to open the panel, and a
+     * control that ignores one because a chunk was in flight is a control that feels broken
+     * for exactly as long as the network is slow.
+     */
+    const [colorWanted, setColorWanted] = useState(false);
     const describedBy = useId();
 
     const isPassword = type === "password";
@@ -263,12 +272,26 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
             data-score={score ?? undefined}
         >
             <div {...fieldProps} data-enigma-input-field="">
-                {/* No fallback, for the reason the meter has none: the field is already on
-                    screen and typeable, and a placeholder where a swatch is about to appear
-                    would be a second layout shift rather than one. */}
+                {/* The swatch is NOT part of the picker's chunk, unlike the meter, which has
+                    nothing to show until it has been asked a question. A colour field with no
+                    swatch until a request lands is a field whose only affordance is missing,
+                    and a press in that window reaches nothing: so the button is here from the
+                    first frame, and a press before the panel's code arrives opens it as soon
+                    as it does. */}
                 {isColor && (
-                    <Suspense fallback={null}>
+                    <Suspense
+                        fallback={
+                            <ColorSwatch
+                                value={value}
+                                locked={locked}
+                                baseline={styles !== false}
+                                label={colorLabels?.open ?? "Pick a colour"}
+                                onPress={() => setColorWanted(true)}
+                            />
+                        }
+                    >
                         <ColorExtras
+                            openOnMount={colorWanted}
                             input={element}
                             value={value}
                             format={format}

package/src/react/input/types.ts

@@ -151,6 +151,10 @@ export interface ColorLabels {
     alpha?: string;
     eyedropper?: string;
     swatches?: string;
+    /** The editable readout under the rails. Default "Colour value". */
+    value?: string;
+    /** The button that cycles the readout between HEX, RGB and HSL. Default "Show as". */
+    formatAs?: string;
     /** The word before the colour in what a screen reader announces. Default "Colour". */
     color?: string;
 }

package/src/react/video/icons.tsx

@@ -0,0 +1,135 @@
+import type { ReactNode } from "react";
+
+/**
+ * The player's icons, drawn rather than loaded - a sprite would be a request per player.
+ *
+ * All of them are on ONE 24x24 grid and inside it. That is not a formality: the gear used to
+ * carry a path with absolute `V21` and `H4` commands in it, which drew a shape half again the
+ * size of the box and hanging off the bottom of its button while every other control sat
+ * centred. An icon that leaves the viewBox cannot be centred by the button it is in.
+ *
+ * The size comes from the stylesheet (`--enigma-video-icon-size`), not from the label's font:
+ * `1.25em` of a 13px bar is a 16px icon, and the same markup in a project with larger text
+ * silently grew a different player.
+ */
+
+function Glyph({ children, filled = false }: { children: ReactNode; filled?: boolean; }): ReactNode {
+    return (
+        <svg
+            viewBox="0 0 24 24"
+            width="1em"
+            height="1em"
+            fill={filled ? "currentColor" : "none"}
+            stroke={filled ? "none" : "currentColor"}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+        >
+            {children}
+        </svg>
+    );
+}
+
+export function Play(): ReactNode {
+    // Centroid at x 11.7 rather than the box's 12: a triangle centred by its bounding box
+    // reads as sitting too far left, which is why every player nudges it right.
+    return <Glyph filled><path d="M8 5v14l11-7z" /></Glyph>;
+}
+
+export function Pause(): ReactNode {
+    return <Glyph filled><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" /></Glyph>;
+}
+
+export function Volume(): ReactNode {
+    return <Glyph><path d="M11 5 6 9H2v6h4l5 4z" /><path d="M15.5 8.5a5 5 0 0 1 0 7" /><path d="M19 5a10 10 0 0 1 0 14" /></Glyph>;
+}
+
+export function VolumeLow(): ReactNode {
+    return <Glyph><path d="M11 5 6 9H2v6h4l5 4z" /><path d="M15.5 8.5a5 5 0 0 1 0 7" /></Glyph>;
+}
+
+export function Muted(): ReactNode {
+    return <Glyph><path d="M11 5 6 9H2v6h4l5 4z" /><path d="m16 9 6 6M22 9l-6 6" /></Glyph>;
+}
+
+export function Captions(): ReactNode {
+    return <Glyph><rect x="2" y="5" width="20" height="14" rx="2.5" /><path d="M7 11h3M7 15h5M14 11h3M14 15h3" /></Glyph>;
+}
+
+/** The same box with the lines struck through, for captions that are off. */
+export function CaptionsOff(): ReactNode {
+    return (
+        <Glyph>
+            <path d="M10.5 5H19.5a2.5 2.5 0 0 1 2.5 2.5v9M18 19H4.5A2.5 2.5 0 0 1 2 16.5v-9A2.5 2.5 0 0 1 4.5 5" />
+            <path d="M7 11h3M7 15h5" />
+            <path d="m3 3 18 18" />
+        </Glyph>
+    );
+}
+
+export function Settings(): ReactNode {
+    return (
+        <Glyph>
+            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z" />
+            <circle cx="12" cy="12" r="3" />
+        </Glyph>
+    );
+}
+
+export function Pip(): ReactNode {
+    return <Glyph><path d="M21 11V6.5A2.5 2.5 0 0 0 18.5 4h-13A2.5 2.5 0 0 0 3 6.5v9A2.5 2.5 0 0 0 5.5 18H9" /><rect x="12" y="12" width="9" height="7" rx="1.5" /></Glyph>;
+}
+
+/** The screen with the signal arcs - the glyph every platform casts with. */
+export function Cast(): ReactNode {
+    return (
+        <Glyph>
+            <path d="M3 8V6.5A2.5 2.5 0 0 1 5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5H13" />
+            <path d="M3 12a8 8 0 0 1 8 8" />
+            <path d="M3 16a4 4 0 0 1 4 4" />
+            <path d="M3 20h.01" />
+        </Glyph>
+    );
+}
+
+export function Expand(): ReactNode {
+    return <Glyph><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" /></Glyph>;
+}
+
+export function Collapse(): ReactNode {
+    return <Glyph><path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" /></Glyph>;
+}
+
+export function Download(): ReactNode {
+    return <Glyph><path d="M12 4v11M7 11l5 5 5-5M4 19h16" /></Glyph>;
+}
+
+/** The tick beside a chosen row in the settings panel. */
+export function Check(): ReactNode {
+    return <Glyph><path d="m5 12.5 4.5 4.5L19 7" /></Glyph>;
+}
+
+export function ChevronRight(): ReactNode {
+    return <Glyph><path d="m9 5 7 7-7 7" /></Glyph>;
+}
+
+export function ChevronLeft(): ReactNode {
+    return <Glyph><path d="m15 5-7 7 7 7" /></Glyph>;
+}
+
+export function Loop(): ReactNode {
+    return <Glyph><path d="M17 2.5 20.5 6 17 9.5" /><path d="M3.5 12V9a3 3 0 0 1 3-3h14" /><path d="M7 21.5 3.5 18 7 14.5" /><path d="M20.5 12v3a3 3 0 0 1-3 3h-14" /></Glyph>;
+}
+
+export function Link(): ReactNode {
+    return <Glyph><path d="M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L11.5 4.4" /><path d="M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07l1.3-1.3" /></Glyph>;
+}
+
+export function Clock(): ReactNode {
+    return <Glyph><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3.5 2" /></Glyph>;
+}
+
+export function Speed(): ReactNode {
+    return <Glyph><path d="M12 20a8 8 0 1 0-8-8" /><path d="M4 20h16" /><path d="m12 12 4.5-4.5" /></Glyph>;
+}