@enigmax/primitives 0.16.0 → 0.18.0

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/input": "./input"
+            "@/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/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,10 +473,169 @@
         "[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, 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",
+        "react"
+      ],
+      "entry": {
+        "vanilla": "@enigmax/primitives",
+        "astro": "@enigmax/primitives",
+        "react": "@enigmax/primitives/react/flag"
+      },
+      "exports": {
+        "vanilla": [
+          "flagAttributes",
+          "flagSrc",
+          "configureFlags"
+        ],
+        "astro": [
+          "flagAttributes",
+          "flagSrc",
+          "configureFlags"
+        ],
+        "react": [
+          "Flag",
+          "configureFlags"
+        ]
+      },
+      "files": [
+        {
+          "path": "src/core/flags.ts",
+          "dest": "flags/flags.ts",
+          "targets": [
+            "vanilla",
+            "astro",
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/flag.tsx",
+          "dest": "flags/index.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/flags": "./flags"
+          },
+          "main": true
+        }
+      ],
+      "styles": false,
+      "themeHooks": [
+        "[data-enigma-flag]",
+        "[data-enigma-flag][data-flag-shape=rect]",
+        "[data-enigma-flag][data-flag-shape=square]",
+        "[data-enigma-flag][data-flag-shape=circle]"
+      ],
+      "assets": "flags",
+      "docs": "docs/notes/primitives.md#flags"
+    },
     {
       "name": "notifications",
       "title": "Notification queue",

package/src/core/flags.ts

@@ -0,0 +1,266 @@
+/**
+ * Country flags as ASSETS, which is the only form of them that renders everywhere.
+ *
+ * The emoji flag is the thing this replaces. It is a pair of regional-indicator code
+ * points, and the glyph for that pair exists only where the platform ships one: Windows
+ * has never shipped country flags in Segoe UI Emoji, so `\u{1F1EA}\u{1F1F8}` renders as
+ * the letters "ES" for the largest desktop platform there is - and a language picker built
+ * out of them looks broken to those readers, with nothing in the code to explain why.
+ * There is no font stack that fixes it, so the fix is not a font: it is an image.
+ *
+ * Three sets, all SVG, all served by enigma itself:
+ *
+ * - `rect` (4:3) and `square` (1:1) - the classic rectangular artwork.
+ * - `circle` - round, which is what a flag next to an avatar or inside a chip wants.
+ *
+ * They are served from enigma's own tree rather than from anyone else's, because a
+ * component whose default source is a third party is a component that breaks when that
+ * third party moves, renames a branch, or goes away.
+ *
+ * Nothing here touches the DOM, so it renders on a server.
+ */
+
+export type FlagShape = "rect" | "square" | "circle";
+
+/**
+ * `svg` is what the sets are stored as, so it is what a remote source can serve. `png` and
+ * `webp` exist for a LOCAL set (`enigma add flags --flags local --flag-formats webp`), which
+ * rasterises what it downloads, and for a mirror of your own.
+ */
+export type FlagFormat = "svg" | "png" | "webp";
+
+/**
+ * Where the files come from.
+ *
+ * - `"cdn"` - enigma's own artwork, over a CDN. Nothing to install.
+ * - `"local"` - files under `basePath` in your own public directory.
+ * - any URL - a mirror of your own with the same layout
+ *   (`<base>/<shape>/<code>.<format>`), which is exactly the tree the downloader writes.
+ */
+export type FlagSource = "cdn" | "local" | (string & {});
+
+/** enigma's own artwork, over a CDN. Every source shares this layout. */
+export const FLAG_CDN = "https://cdn.jsdelivr.net/gh/FJRG2007/enigma@main/assets/flags";
+
+export interface FlagOptions {
+    shape?: FlagShape;
+    format?: FlagFormat;
+    source?: FlagSource;
+    /** Where a local set is served from. Default `/flags`. */
+    basePath?: string;
+    /** Rendered HEIGHT in px. The width follows the shape's ratio. Default 16. */
+    size?: number;
+    /**
+     * Language the automatic name is written in. Left out, it follows the document's own
+     * `lang`, which is what a translated page wants.
+     */
+    locale?: string;
+}
+
+export interface FlagConfig extends Required<Omit<FlagOptions, "size" | "locale">> {
+    size: number;
+    locale?: string;
+}
+
+const DEFAULTS: FlagConfig = {
+    shape: "rect",
+    format: "svg",
+    source: "cdn",
+    basePath: "/flags",
+    size: 16
+};
+
+let config: FlagConfig = { ...DEFAULTS };
+
+/**
+ * Set the defaults for every flag on the page, once, at startup.
+ *
+ * This is what makes the CDN/local decision a one-line change rather than a prop on every
+ * call site: `configureFlags({ source: "local" })` moves the whole app onto the files the
+ * downloader wrote, and nothing else in the codebase mentions where a flag comes from.
+ */
+export function configureFlags(patch: Partial<FlagConfig>): FlagConfig {
+    config = { ...config, ...patch };
+    return config;
+}
+
+export function flagConfig(): FlagConfig {
+    return config;
+}
+
+/** Test seam and a way back to the shipped defaults. */
+export function resetFlagConfig(): FlagConfig {
+    config = { ...DEFAULTS };
+    return config;
+}
+
+/** Width / height of each shape. The circle set is square; only `rect` is 4:3. */
+export const FLAG_RATIO: Record<FlagShape, number> = { rect: 4 / 3, square: 1, circle: 1 };
+
+const EMOJI_FLAG = /^[\u{1F1E6}-\u{1F1FF}]{2}$/u;
+/**
+ * A BCP 47 tag whose region is spelled the way the standard spells it: UPPERCASE. That
+ * casing is the whole discriminator, and it has to be read before the value is lowercased -
+ * `es-ES` is Spanish-in-Spain and means the flag `es`, while `es-ct` is a subdivision code
+ * the sets publish (Catalonia) and means the file `es-ct`. Lowercasing first makes those
+ * two the same string, and then one of them is always wrong.
+ */
+const LOCALE_TAG = /^([A-Za-z]{2,3})[-_]([A-Z]{2})$/;
+/** What the sets actually name their files: `es`, `gb-eng`, `au-nsw`, `easter_island`. */
+const FILE_CODE = /^[a-z]{2,}(?:[-_][a-z0-9]+)*$/;
+/** A plain country: exactly the shape `Intl.DisplayNames` can put a name to. */
+const COUNTRY_CODE = /^[a-z]{2}$/;
+
+/**
+ * Anything a codebase calls a country into the file name the sets use, or null.
+ *
+ * Null rather than a guess: a code this cannot resolve would otherwise become a 404 image
+ * with no alt text, and a broken flag beside a country name is worse than no flag at all.
+ * An emoji flag is accepted and converted, so migrating an existing picker is a rename of
+ * the component and nothing else.
+ */
+export function normalizeFlagCode(value: string | null | undefined): string | null {
+    if (!value) return null;
+    const raw = value.trim();
+    if (!raw) return null;
+
+    if (EMOJI_FLAG.test(raw)) {
+        const letters = [...raw].map((char) => String.fromCharCode((char.codePointAt(0) ?? 0) - 0x1f1e6 + 97));
+        return letters.join("");
+    }
+
+    const locale = LOCALE_TAG.exec(raw);
+    if (locale) return locale[2].toLowerCase();
+
+    const code = raw.toLowerCase();
+    return FILE_CODE.test(code) ? code : null;
+}
+
+/**
+ * The country's name, in the reader's language, or null.
+ *
+ * `Intl.DisplayNames` is the whole implementation: the names are in the runtime already,
+ * translated, and maintained by whoever maintains the platform - so this ships no table of
+ * 250 country names to go stale, and a Spanish page says "España" without being told.
+ *
+ * Null for anything it cannot name, and that is deliberate for SUBDIVISIONS: `gb-eng` is
+ * England, and falling back to the region (`gb`, "United Kingdom") would put a confidently
+ * wrong name on the flag. A name nobody can source is worse than no name.
+ */
+export function flagName(code: string | null | undefined, locale?: string): string | null {
+    const normalized = normalizeFlagCode(code);
+    if (!normalized || !COUNTRY_CODE.test(normalized)) return null;
+    const region = normalized.toUpperCase();
+    try {
+        const names = new Intl.DisplayNames([locale ?? documentLocale() ?? "en"], { type: "region" });
+        const name = names.of(region);
+        // It echoes the input back when it has no name for the code.
+        return !name || name === region ? null : name;
+    } catch {
+        return null;
+    }
+}
+
+/** The page's own language, which is what a translated page wants the name written in. */
+function documentLocale(): string | undefined {
+    if (typeof document === "undefined") return undefined;
+    return document.documentElement.lang || undefined;
+}
+
+/** Everything a renderer needs, computed in one pass. Null when the code is unusable. */
+export interface FlagView {
+    /** The file name, e.g. `es`, `gb-eng`. */
+    code: string;
+    src: string;
+    shape: FlagShape;
+    format: FlagFormat;
+    width: number;
+    height: number;
+    /** The automatic name, when there is one. */
+    name: string | null;
+}
+
+/** One warning per process, not one per flag: a list of 200 would print 200 times. */
+let warnedAboutFormat = false;
+
+/**
+ * The URL for one flag. Null when the code cannot be resolved.
+ *
+ * A raster format asked of the CDN falls back to SVG rather than producing a 404: the sets
+ * are stored as SVG, so `format: "webp"` is only meaningful against a local set or a mirror.
+ * It says so once, in development, instead of silently disagreeing with the call site.
+ */
+export function flagSrc(code: string | null | undefined, options: FlagOptions = {}): string | null {
+    const settings = { ...config, ...options };
+    const normalized = normalizeFlagCode(code);
+    if (!normalized) return null;
+
+    const remote = settings.source === "cdn";
+    let format = settings.format;
+    if (remote && format !== "svg") {
+        if (!warnedAboutFormat && typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+            warnedAboutFormat = true;
+            console.warn(`[enigma/flags] The flags are served as SVG, so "${format}" was served as SVG. Download a local set for raster formats: enigma add flags --flags local --flag-formats ${format}`);
+        }
+        format = "svg";
+    }
+
+    // One layout everywhere - `<base>/<shape>/<code>.<format>` - so a mirror is the same
+    // string with a different host, and the downloader writes exactly what this reads.
+    const base = remote ? FLAG_CDN : (settings.source === "local" ? settings.basePath : settings.source).replace(/\/+$/, "");
+    return `${base}/${settings.shape}/${normalized}.${format}`;
+}
+
+/** `flagSrc` plus the resolved geometry and name, for a renderer that has to size the box. */
+export function flagView(code: string | null | undefined, options: FlagOptions = {}): FlagView | null {
+    const settings = { ...config, ...options };
+    const normalized = normalizeFlagCode(code);
+    const src = flagSrc(normalized, options);
+    if (!normalized || !src) return null;
+    const height = Math.max(1, Math.round(settings.size));
+    return {
+        code: normalized,
+        src,
+        shape: settings.shape,
+        format: settings.source === "cdn" ? "svg" : settings.format,
+        width: Math.round(height * FLAG_RATIO[settings.shape]),
+        height,
+        name: flagName(normalized, settings.locale)
+    };
+}
+
+export interface FlagAttributeOptions extends FlagOptions {
+    /** Your own accessible name, which wins over the automatic one. */
+    label?: string;
+    /**
+     * Beside a country name that is already on screen, the flag is decoration and repeating
+     * the name only makes a screen reader say it twice.
+     */
+    decorative?: boolean;
+}
+
+/**
+ * Attributes for a plain `<img>`, for vanilla, Astro and any template language.
+ *
+ * The accessible name is AUTOMATIC: the country's own name, in the reader's language, from
+ * `Intl.DisplayNames`. `label` replaces it and `decorative` drops it. Nothing is ever
+ * invented - a subdivision the platform cannot name, or a runtime without `Intl`, renders
+ * as decoration rather than putting a bare "ES" into a screen reader.
+ */
+export function flagAttributes(code: string | null | undefined, options: FlagAttributeOptions = {}): Record<string, string | number> | null {
+    const view = flagView(code, options);
+    if (!view) return null;
+    const label = options.decorative ? "" : options.label?.trim() || view.name || "";
+    return {
+        src: view.src,
+        alt: label,
+        width: view.width,
+        height: view.height,
+        loading: "lazy",
+        decoding: "async",
+        "data-enigma-flag": "",
+        "data-flag-code": view.code,
+        "data-flag-shape": view.shape,
+        ...(label ? {} : { "aria-hidden": "true" })
+    };
+}

package/src/core/input-icons.ts

@@ -0,0 +1,34 @@
+/**
+ * The icon shapes both renderers draw.
+ *
+ * Their own module because the React field imports NOTHING else from the vanilla adapter:
+ * pulling `createInput` in for two arrays of path data put the whole imperative renderer
+ * into every React bundle, for a component that never calls it.
+ */
+
+/**
+ * The built-in glyphs, as path data.
+ *
+ * Path data rather than markup because there are two renderers: this file writes an SVG
+ * string into a button it created, and the React component builds elements. Keeping the
+ * shapes here means one definition, and a theme that replaces an icon replaces it in both.
+ * Everything is stroked with `currentColor` at 1em, so an icon inherits the field's text.
+ */
+export const INPUT_ICON_PATHS = {
+    eye: ["M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z", "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"],
+    eyeOff: [
+        "M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2A17.7 17.7 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-.9",
+        "m2 2 20 20",
+        "M9.9 9.9a3 3 0 0 0 4.2 4.2"
+    ],
+    generate: ["m12 3 1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9Z", "M19 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z"],
+    /** Clears a search field. The platform draws one only in WebKit, and not on mobile. */
+    clear: ["m6 6 12 12", "m18 6-12 12"],
+    search: ["M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Z", "m20 20-4.2-4.2"]
+} as const;
+
+/** The same shapes as a standalone SVG string, for the DOM renderer below. */
+export function iconMarkup(paths: readonly string[]): string {
+    const body = paths.map((path) => `<path d="${path}"/>`).join("");
+    return `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+}

package/src/core/input.ts

@@ -73,28 +73,12 @@ export interface InputInstance {
 }
 
 /**
- * The built-in glyphs, as path data.
- *
- * Path data rather than markup because there are two renderers: this file writes an SVG
- * string into a button it created, and the React component builds elements. Keeping the
- * shapes here means one definition, and a theme that replaces an icon replaces it in both.
- * Everything is stroked with `currentColor` at 1em, so an icon inherits the field's text.
+ * The icons live in their own module so the React field can take them without taking this
+ * whole adapter with it. Re-exported here because they were part of this module's API
+ * before the split, and moving an export is a breaking change for no gain.
  */
-export const INPUT_ICON_PATHS = {
-    eye: ["M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z", "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"],
-    eyeOff: [
-        "M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2A17.7 17.7 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-.9",
-        "m2 2 20 20",
-        "M9.9 9.9a3 3 0 0 0 4.2 4.2"
-    ],
-    generate: ["m12 3 1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9Z", "M19 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z"]
-} as const;
-
-/** The same shapes as a standalone SVG string, for the DOM renderer below. */
-export function iconMarkup(paths: readonly string[]): string {
-    const body = paths.map((path) => `<path d="${path}"/>`).join("");
-    return `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
-}
+export { INPUT_ICON_PATHS, iconMarkup } from "@/core/input-icons";
+import { INPUT_ICON_PATHS, iconMarkup } from "@/core/input-icons";
 
 const EYE = iconMarkup(INPUT_ICON_PATHS.eye);
 const EYE_OFF = iconMarkup(INPUT_ICON_PATHS.eyeOff);