@enigmax/primitives 0.17.0 → 0.19.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/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,122 @@
         "[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": "recipes/palette/styles.css",
+          "dest": "palette/styles.css",
+          "targets": [
+            "react"
+          ],
+          "style": "css"
+        },
+        {
+          "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",
+      "recipes": [
+        "css"
+      ]
+    },
     {
       "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 +597,7 @@
       "entry": {
         "vanilla": "@enigmax/primitives",
         "astro": "@enigmax/primitives",
-        "react": "@enigmax/primitives/react"
+        "react": "@enigmax/primitives/react/flag"
       },
       "exports": {
         "vanilla": [

package/src/core/flags.ts

@@ -8,12 +8,14 @@
  * 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.
  *
- * Two upstream sets, both SVG, both installable or served from a CDN:
+ * Three sets, all SVG, all served by enigma itself:
  *
- * - `rect` / `square` - lipis/flag-icons (`flags/4x3`, `flags/1x1`), the classic
- *   rectangular set, 271 flags plus subdivisions.
- * - `circle` - HatScripts/circle-flags (`flags/*.svg` on its gh-pages branch), 445 round
- *   flags, which is what a flag next to an avatar or inside a chip usually wants.
+ * - `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.
  */
@@ -21,26 +23,24 @@
 export type FlagShape = "rect" | "square" | "circle";
 
 /**
- * `svg` is the only format the two upstreams publish, so it is the only one a CDN 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.
+ * `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"` - jsDelivr, straight from the two upstream projects. Nothing to install.
+ * - `"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 as the local one
+ * - 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 & {});
 
-/** Pinned so an upgrade upstream is a decision here, never a surprise in production. */
-export const FLAG_ICONS_VERSION = "7.5.0";
-/** circle-flags publishes from a branch, not a tag; gh-pages is its default branch. */
-export const CIRCLE_FLAGS_REF = "gh-pages";
+/** 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;
@@ -50,10 +50,16 @@ export interface FlagOptions {
     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">> {
+export interface FlagConfig extends Required<Omit<FlagOptions, "size" | "locale">> {
     size: number;
+    locale?: string;
 }
 
 const DEFAULTS: FlagConfig = {
@@ -96,12 +102,14 @@ 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
- * both sets publish (Catalonia) and means the file `es-ct`. Lowercasing first makes those
+ * 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 two sets actually name their files: `es`, `gb-eng`, `au-nsw`, `easter_island`. */
+/** 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.
@@ -128,21 +136,48 @@ export function normalizeFlagCode(value: string | null | undefined): string | nu
     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 upstream file name, e.g. `es`, `gb-eng`. */
+    /** The file name, e.g. `es`, `gb-eng`. */
     code: string;
     src: string;
     shape: FlagShape;
     format: FlagFormat;
     width: number;
     height: number;
-}
-
-function cdnUrl(code: string, shape: FlagShape): string {
-    if (shape === "circle") return `https://cdn.jsdelivr.net/gh/HatScripts/circle-flags@${CIRCLE_FLAGS_REF}/flags/${code}.svg`;
-    const size = shape === "square" ? "1x1" : "4x3";
-    return `https://cdn.jsdelivr.net/npm/flag-icons@${FLAG_ICONS_VERSION}/flags/${size}/${code}.svg`;
+    /** 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. */
@@ -151,32 +186,32 @@ 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: neither
- * upstream publishes anything but 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 what the call site asked for.
+ * 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 remoteCdn = settings.source === "cdn";
+    const remote = settings.source === "cdn";
     let format = settings.format;
-    if (remoteCdn && format !== "svg") {
+    if (remote && format !== "svg") {
         if (!warnedAboutFormat && typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
             warnedAboutFormat = true;
-            console.warn(`[enigma/flags] The flag CDNs publish SVG only, so "${format}" was served as SVG. Download a local set for raster formats: enigma add flags --flags local --flag-formats ${format}`);
+            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";
     }
-    if (remoteCdn) return cdnUrl(normalized, settings.shape);
 
-    const base = (settings.source === "local" ? settings.basePath : settings.source).replace(/\/+$/, "");
+    // 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, for a renderer that has to size the box. */
+/** `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);
@@ -189,25 +224,36 @@ export function flagView(code: string | null | undefined, options: FlagOptions =
         shape: settings.shape,
         format: settings.source === "cdn" ? "svg" : settings.format,
         width: Math.round(height * FLAG_RATIO[settings.shape]),
-        height
+        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.
  *
- * `label` is the accessible name and there is no default for it: a flag with no label is
- * DECORATIVE (empty alt, `aria-hidden`), which is correct beside a country name and is the
- * common case. Inventing one from the code would put "ES" or "es" into a screen reader,
- * and a country name guessed in the reader's wrong language is worse than silence.
+ * 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: FlagOptions & { label?: string; } = {}): Record<string, string | number> | null {
+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.label?.trim();
+    const label = options.decorative ? "" : options.label?.trim() || view.name || "";
     return {
         src: view.src,
-        alt: label ?? "",
+        alt: label,
         width: view.width,
         height: view.height,
         loading: "lazy",

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);