@enigmax/primitives 0.17.0 → 0.18.0

package/dist/react/toast.d.ts

@@ -0,0 +1,40 @@
+import { d as Notifications, N as Notification } from '../notifications-BpVV6sel.js';
+import { ReactNode, CSSProperties } from 'react';
+
+/**
+ * `<Toaster />` - the stack, the movement and the gestures. No colours.
+ *
+ * The queue underneath already owns ordering, dedupe by key, sticky errors and timers that
+ * HOLD while the tab is hidden. What this adds is everything you cannot express in a queue:
+ * a toast that is on its way out is still on screen, a pointer resting on the stack must
+ * stop the clock, and a swipe has to follow the finger before it decides anything.
+ *
+ * Every part carries a data attribute, so the theme is a stylesheet you own. `enigma add
+ * toast --copy` writes one.
+ */
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToasterProps {
+    /** Which queue to render. The shared one by default. */
+    queue?: Notifications;
+    position?: ToastPosition;
+    /**
+     * How long the exit animation lasts, in ms. The node stays mounted for exactly this
+     * long after it leaves the queue - a toast that vanishes the instant it is dismissed
+     * cannot animate out, and that is the only reason this component keeps its own list.
+     */
+    exitDuration?: number;
+    /** Px a toast must travel before the release dismisses it. */
+    swipeThreshold?: number;
+    /** Render a toast yourself. The default renders title, body and the action. */
+    children?: (notification: Notification, controls: ToastControls) => ReactNode;
+    /** Accessible name for the region. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+interface ToastControls {
+    dismiss: () => void;
+}
+declare function Toaster({ queue, position, exitDuration, swipeThreshold, children, label, className, style }: ToasterProps): ReactNode;
+
+export { type ToastControls, type ToastPosition, Toaster, type ToasterProps };

package/dist/react/toast.js

@@ -0,0 +1,4 @@
+"use client";
+export { Toaster } from '../chunk-ZCUFYBPB.js';
+import '../chunk-QYMUIW5I.js';
+import '../chunk-SNYUBXWQ.js';

package/dist/react-router/index.d.ts

@@ -1,8 +1,25 @@
 import * as react from 'react';
-import { ButtonProps } from '../react/index.js';
-export { BreachChecker, BreachState, BreachStatus, FieldAction, Flag, FlagProps, Input, InputProps, PasswordStrength, PasswordStrengthProps, RelativeTime, RelativeTimeProps, ToastControls, ToastPosition, Toaster, ToasterProps, UseButtonResult, UseInputResult, UseMarqueeResult, UseNotificationsResult, UseSearchResult, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../react/index.js';
-export { ButtonOptions, ButtonState, EstimateOptions, FlagFormat, FlagOptions, FlagShape, FlagSource, GeneratePasswordOptions, InputAction, InputIcon, InputOptions, MarqueeHover, MarqueeInstance, MarqueeOptions, NetworkState, PasswordScore, PasswordStrengthReport, configureFlags, estimatePasswordStrength, flagAttributes, flagSrc, flagView, generatePassword, normalizeFlagCode } from '../index.js';
+import { ButtonProps } from '../react/button.js';
+export { UseMarqueeResult, useMarquee } from '../react/marquee.js';
+export { M as MarqueeHover, a as MarqueeInstance, b as MarqueeOptions } from '../marquee-CJ3Uwy3E.js';
+export { PasswordStrength, PasswordStrengthProps, UseButtonResult, UseInputResult, getLinkComponent, setLinkComponent, useButton, useInput } from '../react/index.js';
+export { UseSearchResult, useSearch } from '../react/search.js';
+export { I as InputAction, b as InputIcon, d as InputOptions } from '../input-BwXjFenq.js';
 export { F as FuseConstructor, b as SearchMatch, c as SearchOptions } from '../search-CsO3L1Lw.js';
+export { c as ButtonOptions, d as ButtonState } from '../button-CaXaqG_K.js';
+export { B as BreachChecker, a as BreachState, b as BreachStatus, F as FieldAction, I as Input, c as InputBaseProps, d as InputProps, e as InputType, P as PasswordOnlyProps, g as PlainOnlyProps, S as SearchOnlyProps } from '../index-DNXPtY9X.js';
+export { Slot, SlotProps, mergeSlotProps } from '../react/slot.js';
+export { E as EstimateOptions, G as GeneratePasswordOptions, a as PasswordScore, b as PasswordStrengthReport, e as estimatePasswordStrength, g as generatePassword } from '../password-C8lG4Zm9.js';
+export { UseNotificationsResult, createNotificationQueue, defaultQueue, useNotifications } from '../react/notifications.js';
+export { ToastControls, ToastPosition, Toaster, ToasterProps } from '../react/toast.js';
+export { useNetworkState } from '../react/network.js';
+export { a as NetworkState } from '../network-D2LsBG_k.js';
+export { RelativeTime, RelativeTimeProps } from '../react/relative-time.js';
+export { Flag, FlagProps } from '../react/flag.js';
+export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-BBJc9unY.js';
+export { P as PaletteContent, a as PaletteContextValue, b as PaletteField, c as PaletteFooter, d as PaletteItem, e as PaletteList, f as PaletteListProps, g as PaletteRoot, h as PaletteRootProps, i as PaletteRow, j as PaletteSection, k as PaletteTrigger, R as RecentEntry, l as RecentStore, S as SearchPalette, m as SearchPaletteProps, n as createRecentStore, o as groupRows, p as isPaletteShortcut, q as moveActive, r as recentKey, s as shortcutLabel, u as usePaletteContext } from '../index-D-ARvWpQ.js';
+import '../notifications-BpVV6sel.js';
+import '../relative-time-YpRTG7YH.js';
 
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
 

package/dist/react-router/index.js

@@ -1,8 +1,28 @@
 "use client";
-import { Button } from '../chunk-JFNND6P4.js';
-export { Flag, Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../chunk-JFNND6P4.js';
-export { configureFlags, estimatePasswordStrength, flagAttributes, flagSrc, flagView, generatePassword, normalizeFlagCode } from '../chunk-4GLYRF4B.js';
+export { useInput } from '../chunk-U3V4EHOB.js';
+export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
+export { Flag } from '../chunk-XNNQRA35.js';
+export { Toaster } from '../chunk-ZCUFYBPB.js';
+export { useMarquee } from '../chunk-ZWR2EXHQ.js';
+export { useSearch } from '../chunk-WSB655JB.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';
+export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
+export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-AU3H5WIY.js';
+import '../chunk-UOSSNUSC.js';
+import '../chunk-2QFTRNAZ.js';
+import '../chunk-SNYUBXWQ.js';
+import '../chunk-IXVMRVD4.js';
+export { Input } from '../chunk-IIT6U7LM.js';
+import '../chunk-F25CGNQC.js';
+export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel, usePaletteContext } from '../chunk-LKA2UG4P.js';
 import '../chunk-UZFEEFMF.js';
+import { Button } from '../chunk-6BGBYUSZ.js';
+export { getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
+import '../chunk-MMQPZGSU.js';
+export { Slot, mergeSlotProps } from '../chunk-HS3X3XCW.js';
 import { Link } from 'react-router';
 import { forwardRef, createElement } from 'react';
 

package/dist/relative-time-YpRTG7YH.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Relative time: "3 hours ago", and everything that has to be right around it.
+ *
+ * The rendering itself is `<relative-time>` (@github/relative-time-element), which already
+ * owns the hard parts - Intl.RelativeTimeFormat per locale, and re-rendering on a schedule
+ * that gets slower as the date gets older. What is here is the part every wrapper
+ * re-implements and usually gets wrong: parsing a timestamp that does not declare its zone,
+ * knowing when the date has aged past the relative threshold, and producing an absolute
+ * label to show while the element is still loading, or forever if scripting is off.
+ *
+ * Nothing in this file touches the DOM, so it renders on a server.
+ */
+/** How the element should phrase it. `auto` is relative until the threshold, then a date. */
+type RelativeTimeFormat = "auto" | "relative" | "duration" | "datetime" | "micro" | "elapsed";
+type RelativeTimeTense = "auto" | "past" | "future";
+type RelativeTimePrecision = "year" | "month" | "day" | "hour" | "minute" | "second";
+type RelativeTimeStyle = "long" | "short" | "narrow";
+type NumericStyle = "numeric" | "2-digit";
+interface RelativeTimeOptions {
+    format?: RelativeTimeFormat;
+    tense?: RelativeTimeTense;
+    precision?: RelativeTimePrecision;
+    /** ISO 8601 duration. Past this age `auto` stops being relative. Default `P30D`. */
+    threshold?: string;
+    /** Word before an absolute date, e.g. "on 5 May". Empty string removes it. */
+    prefix?: string;
+    formatStyle?: RelativeTimeStyle;
+    /**
+     * BCP 47 tag. Left undefined the element reads the closest `lang` in the document,
+     * which is what a translated page wants - hardcoding one is how a Spanish page ends
+     * up saying "3 hours ago".
+     */
+    locale?: string;
+    /** IANA zone for the absolute rendering. Undefined means the reader's own. */
+    timeZone?: string;
+    second?: NumericStyle;
+    minute?: NumericStyle;
+    hour?: NumericStyle;
+    weekday?: RelativeTimeStyle;
+    day?: NumericStyle;
+    month?: NumericStyle | "short" | "long" | "narrow";
+    year?: NumericStyle;
+    timeZoneName?: "long" | "short" | "shortOffset" | "longOffset" | "shortGeneric" | "longGeneric";
+    /** Drop the exact timestamp the element otherwise puts in `title`. */
+    noTitle?: boolean;
+    /**
+     * Once the date is older than `threshold`, render it as digits (05/05/2026) instead of
+     * a prefixed month name. The cutoff is the threshold itself, not a guess at it.
+     */
+    numericBeyondThreshold?: boolean;
+}
+/** Everything derived from a date, in one pass, for whichever adapter is rendering it. */
+interface RelativeTimeView {
+    /** Null when the input could not be parsed - nothing else here is meaningful then. */
+    date: Date | null;
+    /** `datetime` attribute value: always UTC, always ISO. */
+    iso: string;
+    /** Absolute text. Shown until the element upgrades, and forever without scripting. */
+    label: string;
+    /** Full timestamp for `title` / `aria-label`. */
+    exact: string;
+    /** The date is older (or further ahead) than `threshold`. */
+    beyondThreshold: boolean;
+    /** Render `label` in a plain `<time>` and skip the element entirely. */
+    absoluteOnly: boolean;
+}
+/**
+ * A timestamp with no zone is UTC.
+ *
+ * This is the single most common defect in a date column: `2026-08-13 22:41:00` comes back
+ * from the database with no offset, `new Date()` reads it as LOCAL time, and every reader
+ * east or west of the server sees a time that is hours out - silently, because the wrong
+ * time is still a valid one.
+ *
+ * A date with no clock is left exactly as it is. The spec already reads a bare `YYYY-MM-DD`
+ * as UTC, so there is nothing to add - and `YYYY-MM-DDZ` is not in the spec's grammar at
+ * all, which drops it into each engine's own legacy parser. That is a portability coin
+ * flip on a value that was already correct.
+ */
+declare function ensureZone(text: string): string;
+/** Parse anything a date column or an API hands over. Null rather than an Invalid Date. */
+declare function normalizeDate(value: string | number | Date | null | undefined): Date | null;
+/**
+ * ISO 8601 duration to milliseconds, for comparing an age against `threshold`.
+ *
+ * Years and months are approximated the way the element approximates them, because the
+ * threshold is a rough "old enough to stop counting", not an anniversary.
+ */
+declare function parseDuration(value: string): number;
+/**
+ * Everything an adapter needs to render one date.
+ *
+ * `now` is a parameter so a test can pin it, and so a server render can pass the same
+ * instant it used elsewhere on the page.
+ */
+declare function relativeTimeView(value: string | number | Date | null | undefined, options?: RelativeTimeOptions, now?: Date): RelativeTimeView;
+/**
+ * The element's attributes, kebab-cased, with anything undefined left out.
+ *
+ * Written as attributes rather than properties because that is the half of a custom
+ * element's API that works before it is defined - the markup is already correct when the
+ * definition arrives late, or never.
+ */
+declare function relativeTimeAttributes(view: RelativeTimeView, options?: RelativeTimeOptions): Record<string, string>;
+
+export { type RelativeTimeFormat as R, type RelativeTimeOptions as a, type RelativeTimePrecision as b, type RelativeTimeStyle as c, type RelativeTimeTense as d, type RelativeTimeView as e, ensureZone as f, relativeTimeView as g, normalizeDate as n, parseDuration as p, relativeTimeAttributes as r };

package/dist/search-P4OHCRXD.js

@@ -0,0 +1,50 @@
+import { createSearch } from './chunk-UZFEEFMF.js';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function SearchExtras({
+  input,
+  items,
+  keys,
+  delay = 150,
+  limit,
+  fuse,
+  fuseOptions,
+  matcher,
+  onResults,
+  renderResults
+}) {
+  const [results, setResults] = useState([]);
+  const [query, setQuery] = useState("");
+  const listener = useRef(onResults);
+  listener.current = onResults;
+  const instance = useMemo(() => createSearch({
+    items,
+    keys,
+    fuse,
+    fuseOptions,
+    matcher,
+    debounce: delay,
+    limit,
+    onResults: (next, nextQuery) => {
+      setResults(next);
+      setQuery(nextQuery);
+      listener.current?.(next, nextQuery);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+  useEffect(() => () => instance.destroy(), [instance]);
+  useEffect(() => {
+    instance.setItems(items ?? []);
+  }, [instance, items]);
+  useEffect(() => {
+    instance.update({ keys, fuse, fuseOptions, matcher, debounce: delay, limit });
+  }, [instance, keys, fuse, fuseOptions, matcher, delay, limit]);
+  useEffect(() => {
+    if (!input) return;
+    return instance.attach(input);
+  }, [instance, input]);
+  return renderResults ? /* @__PURE__ */ jsx(Fragment, { children: renderResults(results, query) }) : null;
+}
+
+export { SearchExtras };

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.17.0",
+  "version": "0.18.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": [
+    "*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -14,6 +17,50 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js"
     },
+    "./react/input": {
+      "types": "./dist/react/input.d.ts",
+      "import": "./dist/react/input.js"
+    },
+    "./react/palette": {
+      "types": "./dist/react/palette.d.ts",
+      "import": "./dist/react/palette.js"
+    },
+    "./react/button": {
+      "types": "./dist/react/button.d.ts",
+      "import": "./dist/react/button.js"
+    },
+    "./react/flag": {
+      "types": "./dist/react/flag.d.ts",
+      "import": "./dist/react/flag.js"
+    },
+    "./react/toast": {
+      "types": "./dist/react/toast.d.ts",
+      "import": "./dist/react/toast.js"
+    },
+    "./react/marquee": {
+      "types": "./dist/react/marquee.d.ts",
+      "import": "./dist/react/marquee.js"
+    },
+    "./react/search": {
+      "types": "./dist/react/search.d.ts",
+      "import": "./dist/react/search.js"
+    },
+    "./react/network": {
+      "types": "./dist/react/network.d.ts",
+      "import": "./dist/react/network.js"
+    },
+    "./react/notifications": {
+      "types": "./dist/react/notifications.d.ts",
+      "import": "./dist/react/notifications.js"
+    },
+    "./react/relative-time": {
+      "types": "./dist/react/relative-time.d.ts",
+      "import": "./dist/react/relative-time.js"
+    },
+    "./react/slot": {
+      "types": "./dist/react/slot.d.ts",
+      "import": "./dist/react/slot.js"
+    },
     "./registry.json": "./registry.json",
     "./search": {
       "types": "./dist/search/index.d.ts",
@@ -51,6 +98,7 @@
   ],
   "peerDependencies": {
     "@github/relative-time-element": ">=4",
+    "react-dom": ">=18",
     "fuse.js": ">=6",
     "next": ">=13",
     "react": ">=18",
@@ -60,6 +108,9 @@
     "react": {
       "optional": true
     },
+    "react-dom": {
+      "optional": true
+    },
     "fuse.js": {
       "optional": true
     },
@@ -92,7 +143,6 @@
   "keywords": [
     "carousel",
     "enigma",
-    "flag-icons",
     "flags",
     "fuse",
     "headless",

package/registry.json

@@ -155,8 +155,8 @@
     },
     {
       "name": "input",
-      "title": "Input, with what a password field needs",
-      "description": "A field you pass props to, with no styles of its own. A password gets its reveal toggle automatically; a generator, a strength meter and a breach check are one prop each and off until you ask. React renders every part of it, so nothing fights your tree.",
+      "title": "Input, one field for every type",
+      "description": "A field you pass props to, typed by its `type`: password gets the reveal toggle, a generator, a strength meter and a breach check; search gets debouncing, ranking and a clear button; everything else is a plain field with native props. What each type needs is loaded when that type is used, so a form of text fields ships none of it.",
       "targets": [
         "vanilla",
         "astro",
@@ -165,7 +165,7 @@
       "entry": {
         "vanilla": "@enigmax/primitives",
         "astro": "@enigmax/primitives",
-        "react": "@enigmax/primitives/react"
+        "react": "@enigmax/primitives/react/input"
       },
       "exports": {
         "vanilla": [
@@ -181,17 +181,28 @@
       },
       "files": [
         {
-          "path": "src/core/input.ts",
-          "dest": "input/input.ts",
+          "path": "src/core/input-icons.ts",
+          "dest": "input/input-icons.ts",
           "targets": [
             "vanilla",
             "astro",
             "react"
           ]
         },
+        {
+          "path": "src/core/input.ts",
+          "dest": "input/input.ts",
+          "targets": [
+            "vanilla",
+            "astro"
+          ],
+          "rewrite": {
+            "@/core/input-icons": "./input-icons"
+          }
+        },
         {
           "path": "src/core/password.ts",
-          "dest": "input/password.ts",
+          "dest": "input/password-core.ts",
           "targets": [
             "vanilla",
             "astro",
@@ -199,13 +210,56 @@
           ]
         },
         {
-          "path": "src/react/use-input.ts",
-          "dest": "input/use-input.ts",
+          "path": "src/core/search.ts",
+          "dest": "input/search-core.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/input/types.ts",
+          "dest": "input/types.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/search": "./search-core",
+            "@/core/password": "./password-core"
+          }
+        },
+        {
+          "path": "src/react/input/icon.tsx",
+          "dest": "input/icon.tsx",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/input/write-value.ts",
+          "dest": "input/write-value.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/input/password.tsx",
+          "dest": "input/password.tsx",
           "targets": [
             "react"
           ],
           "rewrite": {
-            "@/core/input": "./input"
+            "@/core/password": "./password-core",
+            "@/react/input/types": "./types"
+          }
+        },
+        {
+          "path": "src/react/input/search.tsx",
+          "dest": "input/search.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/search": "./search-core"
           }
         },
         {
@@ -219,15 +273,20 @@
           "style": "css"
         },
         {
-          "path": "src/react/input.tsx",
+          "path": "src/react/input/index.tsx",
           "dest": "input/index.tsx",
           "main": true,
           "targets": [
             "react"
           ],
           "rewrite": {
-            "@/core/input": "./input",
-            "@/core/password": "./password"
+            "@/react/input/icon": "./icon",
+            "@/react/input/write-value": "./write-value",
+            "@/core/input-icons": "./input-icons",
+            "@/react/input/types": "./types",
+            "@/react/input/password": "./password",
+            "@/react/input/search": "./search",
+            "@/core/password": "./password-core"
           }
         },
         {
@@ -262,7 +321,8 @@
         "[data-enigma-password-strength-segment]",
         "[data-enigma-password-strength-segment][data-filled]",
         "[data-enigma-password-strength-label]",
-        "[data-enigma-password-strength-warning]"
+        "[data-enigma-password-strength-warning]",
+        "[data-enigma-input-action=clear]"
       ],
       "docs": "docs/notes/primitives.md#input",
       "recipes": [
@@ -273,7 +333,7 @@
     {
       "name": "search",
       "title": "Search as you type",
-      "description": "Search as you type, fuzzy by default with Fuse.js. Debouncing, ranking and cancellation are the primitive's; the matching is replaceable, and dropping Fuse falls back to a built-in accent-insensitive substring matcher.",
+      "description": "The engine behind `<Input type=\"search\">` and the palette: debouncing, ranking and cancellation, fuzzy with Fuse.js or a built-in accent-insensitive substring matcher with no dependency at all.",
       "targets": [
         "vanilla",
         "astro",
@@ -282,7 +342,7 @@
       "entry": {
         "vanilla": "@enigmax/primitives/search",
         "astro": "@enigmax/primitives/search",
-        "react": "@enigmax/primitives/react"
+        "react": "@enigmax/primitives/react/search"
       },
       "exports": {
         "vanilla": [
@@ -413,14 +473,111 @@
         "[data-loading]",
         "[data-cooldown]",
         "[aria-disabled=true]",
-        "[aria-busy=true]"
+        "[aria-busy=true]",
+        "[data-enigma-button-key]"
       ],
       "docs": "docs/notes/primitives.md#button"
     },
+    {
+      "name": "palette",
+      "title": "Command palette",
+      "description": "Ctrl/Cmd+K, search as you type, what was searched before, groups, and every key a palette is expected to answer to. A dialog made of parts you can compose or take whole, with the focus trap, the scroll lock and the listbox wiring already right.",
+      "targets": [
+        "react"
+      ],
+      "entry": {
+        "react": "@enigmax/primitives/react/palette"
+      },
+      "exports": {
+        "react": [
+          "SearchPalette"
+        ]
+      },
+      "files": [
+        {
+          "path": "src/core/palette.ts",
+          "dest": "palette/palette.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/core/search.ts",
+          "dest": "palette/search-core.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/slot.tsx",
+          "dest": "palette/slot.tsx",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/palette/context.ts",
+          "dest": "palette/context.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/palette": "./palette",
+            "@/core/search": "./search-core"
+          }
+        },
+        {
+          "path": "src/react/palette/root.tsx",
+          "dest": "palette/root.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/palette": "./palette",
+            "@/core/search": "./search-core",
+            "@/react/slot": "./slot",
+            "@/react/palette/context": "./context"
+          }
+        },
+        {
+          "path": "src/react/palette/index.tsx",
+          "dest": "palette/index.tsx",
+          "main": true,
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/palette/root": "./root",
+            "@/react/palette/context": "./context"
+          }
+        }
+      ],
+      "styles": false,
+      "themeHooks": [
+        "[data-enigma-palette-trigger]",
+        "[data-enigma-palette-trigger-key]",
+        "[data-enigma-palette-overlay]",
+        "[data-enigma-palette-content]",
+        "[data-enigma-palette-title]",
+        "[data-enigma-palette-field]",
+        "[data-enigma-palette-list]",
+        "[data-enigma-palette-group]",
+        "[data-enigma-palette-group-label]",
+        "[data-enigma-palette-item]",
+        "[data-enigma-palette-item][data-active=true]",
+        "[data-enigma-palette-item][data-kind=recent]",
+        "[data-enigma-palette-item-label]",
+        "[data-enigma-palette-item-description]",
+        "[data-enigma-palette-empty]",
+        "[data-enigma-palette-footer]",
+        "[data-enigma-palette-hint]"
+      ],
+      "docs": "docs/notes/primitives.md#palette"
+    },
     {
       "name": "flags",
       "title": "Country flags",
-      "description": "A flag as an image, from the CDN or from files you downloaded, in the rectangular set or the round one. Emoji flags are the thing this replaces: Windows ships no glyph for them, so a picker built out of emoji renders as bare letters for most desktop readers.",
+      "description": "A flag as an image, served by enigma or from files in your project, rectangular, square or round. It names itself in the reader's language, and accepts the emoji flag it replaces as its code - Windows ships no glyph for those, so a picker built out of emoji renders as bare letters for most desktop readers.",
       "targets": [
         "vanilla",
         "astro",
@@ -429,7 +586,7 @@
       "entry": {
         "vanilla": "@enigmax/primitives",
         "astro": "@enigmax/primitives",
-        "react": "@enigmax/primitives/react"
+        "react": "@enigmax/primitives/react/flag"
       },
       "exports": {
         "vanilla": [