@sigx/lynx-icons 0.4.0 → 0.4.2

package/dist/Icon.d.ts

@@ -1,6 +1,27 @@
 import { type Define } from '@sigx/lynx';
 import '@sigx/lynx-icons/__font-face.css';
-export type IconProps = Define.Prop<'set', string, true> & Define.Prop<'name', string, true> & Define.Prop<'size', number, false> & Define.Prop<'color', string, false> & Define.Prop<'class', string, false>;
+import type { IconColorResolver, IconPropsExtensions } from './types.js';
+/**
+ * Injectable for the active theme's color resolver. Receives the full
+ * `<Icon>` props (including theme-augmented fields like daisy's
+ * `variant`) and returns a CSS color value to substitute into the SVG
+ * `fill=`, or `undefined` to fall through.
+ *
+ * Themes provide this via `defineProvide(useIconColorResolver, …)` from
+ * inside a provider component (e.g. daisy's `<ThemeProvider>`). Core
+ * `<Icon>` has no concept of named variants — it just asks the resolver
+ * for a color.
+ */
+export declare const useIconColorResolver: import("@sigx/runtime-core").InjectableFunction<IconColorResolver | null>;
+export type IconProps = Define.Prop<'set', string, true> & Define.Prop<'name', string, true> & Define.Prop<'size', number, false> & Define.Prop<'color', string, false> & Define.Prop<'class', string, false>
+/**
+ * Augmentation point — theme packages declaration-merge into
+ * `IconPropsExtensions` to add their own typed props (e.g. daisy
+ * adds `variant?: DaisyColor`). Core declares no specific
+ * extensions, so without a theme installed, no extra props exist
+ * and the type system rejects `<Icon variant="…">` at compile time.
+ */
+ & IconPropsExtensions;
 export declare function sanitizeColor(color: string): string;
 export declare function inlineSvg(template: string, color: string): string;
 /**

package/dist/Icon.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component, defineInjectable } from '@sigx/lynx';
+import { codepoints } from '@sigx/lynx-icons/__codepoints';
+import { svgs } from '@sigx/lynx-icons/__svgs';
+import '@sigx/lynx-icons/__font-face.css';
+import { lookupGlyph } from './registry.js';
+/**
+ * Injectable for the active theme's color resolver. Receives the full
+ * `<Icon>` props (including theme-augmented fields like daisy's
+ * `variant`) and returns a CSS color value to substitute into the SVG
+ * `fill=`, or `undefined` to fall through.
+ *
+ * Themes provide this via `defineProvide(useIconColorResolver, …)` from
+ * inside a provider component (e.g. daisy's `<ThemeProvider>`). Core
+ * `<Icon>` has no concept of named variants — it just asks the resolver
+ * for a color.
+ */
+export const useIconColorResolver = defineInjectable(() => null);
+/**
+ * Match a conservative subset of valid CSS color formats:
+ * - `currentColor` and named colors (`red`, `dodgerblue`, `transparent` …)
+ * - `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa`
+ * - `rgb(...)` / `rgba(...)` / `hsl(...)` / `hsla(...)` with digits, dots,
+ *   commas, percent signs, and whitespace inside the parens
+ * - `var(--name)` referencing a CSS custom property — the only way to
+ *   plumb theme tokens (`var(--color-primary)`) into the SVG `fill=`
+ *   attribute, since Lynx's `<svg content=…>` parses the SVG string as
+ *   a standalone fragment that doesn't inherit `color` from the host
+ *   element (so `fill="currentColor"` + a host-level class is a no-op).
+ *
+ * Anything else (quotes, angle brackets, ampersands, arbitrary HTML) falls
+ * back to `currentColor`. The `color` prop ends up substituted directly into
+ * the SVG markup that we hand to Lynx's `<svg content={…}>` parser, so a
+ * value like `red" stroke="…` would break out of the `fill=""` attribute.
+ * Allow-list, not escape-list — keeps the surface area provably small.
+ */
+const SAFE_COLOR_RE = /^(?:currentColor|[a-zA-Z]+|#[0-9a-fA-F]{3,8}|(?:rgb|rgba|hsl|hsla)\(\s*[\d.,%\s]+\)|var\(\s*--[\w-]+\s*\))$/;
+export function sanitizeColor(color) {
+    return SAFE_COLOR_RE.test(color) ? color : 'currentColor';
+}
+export function inlineSvg(template, color) {
+    return template.replace(/__COLOR__/g, sanitizeColor(color));
+}
+/**
+ * Render a glyph from a registered icon set.
+ *
+ * Sets are declared in `signalx.config.ts` via `iconSets: [...]` (build-time,
+ * tree-shaken) or via `defineIconSet({ id, glyphs })` (runtime, ad-hoc).
+ *
+ * Resolution order: **SVG first**, then codepoint, then missing placeholder.
+ *
+ * - SVG-mode sets render with Lynx's native `<svg content={...}>` element
+ *   (the engine parses the inline XML; no JSX children, no data: URIs).
+ * - Font-mode sets fall back to a single character inside a `<text>` element
+ *   with a matching `font-family`. The plugin only emits codepoints when the
+ *   matching `@font-face` has also been registered (v1.1+); v1 always hits
+ *   the SVG branch.
+ * - Missing glyphs render an empty `<view>` of the same size so layout
+ *   doesn't jump.
+ *
+ * @example
+ * ```tsx
+ * <Icon set="fa" name="user" size={20} color="#333" />
+ * <Icon set="lucide" name="search" size={16} />
+ * ```
+ */
+export const Icon = component(({ props }) => {
+    // Resolve the active theme's color resolver once at setup. The
+    // resolver itself is a stable function reference; it reads the
+    // theme-augmented props (e.g. `props.variant` for daisy) and any
+    // reactive theme state (e.g. `theme.name`) on each call.
+    const resolveColor = useIconColorResolver();
+    return () => {
+        const size = props.size ?? 16;
+        const set = props.set;
+        const name = props.name;
+        const sizeStyle = { width: size, height: size };
+        // Resolution order: explicit `props.color` wins → then the
+        // theme resolver's return (driven by augmented props like
+        // `variant`) → finally `currentColor`. Substituted directly
+        // into the SVG `fill=` attribute by `inlineSvg`; class is not
+        // used to convey color because Lynx's `<svg content=…>` parses
+        // the SVG string in isolation and doesn't inherit host CSS
+        // `color`.
+        //
+        // `props` is cast to the unknown-record shape the resolver
+        // signature expects — at compile time the augmented fields are
+        // typed correctly inside the resolver itself (where the theme
+        // package's augmentation is in scope).
+        const themeColor = resolveColor
+            ? resolveColor(props)
+            : undefined;
+        const color = props.color ?? themeColor ?? 'currentColor';
+        const glyph = lookupGlyph(codepoints, svgs, set, name);
+        if (glyph?.svg) {
+            return (_jsx("svg", { content: inlineSvg(glyph.svg.svg, color), class: props.class, style: sizeStyle }));
+        }
+        if (glyph?.codepoint !== undefined) {
+            const textStyle = {
+                fontFamily: set,
+                fontSize: size,
+                lineHeight: `${size}px`,
+                width: size,
+                height: size,
+                color,
+            };
+            return (_jsx("text", { class: props.class, style: textStyle, children: String.fromCodePoint(glyph.codepoint) }));
+        }
+        return _jsx("view", { class: props.class, style: sizeStyle });
+    };
+});

package/dist/defineIconSet.d.ts

@@ -1,4 +1,4 @@
-import type { IconSetDef } from './types';
+import type { IconSetDef } from './types.js';
 /**
  * Register a custom icon set at module load time.
  *
@@ -24,4 +24,4 @@ import type { IconSetDef } from './types';
  * markup get substituted with the user's `color` prop at render time.
  */
 export declare function defineIconSet(def: IconSetDef): IconSetDef;
-export type { IconSetDef } from './types';
+export type { IconSetDef } from './types.js';

package/dist/defineIconSet.js

@@ -1,2 +1,29 @@
-import { t as e } from "./defineIconSet-BIFjZq08.js";
-export { e as defineIconSet };
+import { registerIconSet } from './registry.js';
+/**
+ * Register a custom icon set at module load time.
+ *
+ * Build-time sets declared in `signalx.config.ts` are auto-detected and
+ * tree-shaken; `defineIconSet` is the escape hatch for ad-hoc sets defined
+ * directly in app code (e.g. a small private set used in one screen).
+ *
+ * @example
+ * ```ts
+ * defineIconSet({
+ *   id: 'brand',
+ *   glyphs: {
+ *     logo: {
+ *       svg: {
+ *         svg: '<svg viewBox="0 0 24 24" fill="__COLOR__"><path d="M3 12L12 3l9 9-9 9z"/></svg>',
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ *
+ * The inner `svg` value is raw SVG markup. `__COLOR__` placeholders in that
+ * markup get substituted with the user's `color` prop at render time.
+ */
+export function defineIconSet(def) {
+    registerIconSet(def);
+    return def;
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Icon } from './Icon';
-export type { IconProps } from './Icon';
-export { defineIconSet } from './defineIconSet';
-export type { GlyphData, GlyphSvg, IconAdapter, IconSetDef } from './types';
+export { Icon, useIconColorResolver } from './Icon.js';
+export type { IconProps } from './Icon.js';
+export { defineIconSet } from './defineIconSet.js';
+export type { GlyphData, GlyphSvg, IconAdapter, IconColorResolver, IconPropsExtensions, IconSetDef, IconSpec, } from './types.js';

package/dist/index.js

@@ -1,50 +1,2 @@
-import { n as e, t } from "./defineIconSet-BIFjZq08.js";
-import { component as n } from "@sigx/lynx";
-import { codepoints as r } from "@sigx/lynx-icons/__codepoints";
-import { svgs as i } from "@sigx/lynx-icons/__svgs";
-import "@sigx/lynx-icons/__font-face.css";
-import { jsx as a } from "@sigx/lynx/jsx-runtime";
-//#region src/Icon.tsx
-var o = /^(?:currentColor|[a-zA-Z]+|#[0-9a-fA-F]{3,8}|(?:rgb|rgba|hsl|hsla)\(\s*[\d.,%\s]+\))$/;
-function s(e) {
-	return o.test(e) ? e : "currentColor";
-}
-function c(e, t) {
-	return e.replace(/__COLOR__/g, s(t));
-}
-var l = n(({ props: t }) => () => {
-	let n = t.size ?? 16, o = t.set, s = t.name, l = {
-		width: n,
-		height: n
-	}, u = e(r, i, o, s);
-	if (u?.svg) {
-		let e = t.color ?? "currentColor";
-		return /* @__PURE__ */ a("svg", {
-			content: c(u.svg.svg, e),
-			class: t.class,
-			style: l
-		});
-	}
-	if (u?.codepoint !== void 0) {
-		let e = {
-			fontFamily: o,
-			fontSize: n,
-			lineHeight: `${n}px`,
-			width: n,
-			height: n
-		};
-		return t.color && (e.color = t.color), /* @__PURE__ */ a("text", {
-			class: t.class,
-			style: e,
-			children: String.fromCodePoint(u.codepoint)
-		});
-	}
-	return /* @__PURE__ */ a("view", {
-		class: t.class,
-		style: l
-	});
-});
-//#endregion
-export { l as Icon, t as defineIconSet };
-
-//# sourceMappingURL=index.js.map
+export { Icon, useIconColorResolver } from './Icon.js';
+export { defineIconSet } from './defineIconSet.js';

package/dist/registry.d.ts

@@ -1,4 +1,4 @@
-import type { CodepointMap, GlyphSvg, IconSetDef, SvgMap } from './types';
+import type { CodepointMap, GlyphSvg, IconSetDef, SvgMap } from './types.js';
 export declare function registerIconSet(def: IconSetDef): void;
 export declare function lookupCodepoint(buildTime: CodepointMap, set: string, name: string): number | undefined;
 export declare function lookupSvg(buildTime: SvgMap, set: string, name: string): GlyphSvg | undefined;

package/dist/registry.js

@@ -0,0 +1,31 @@
+const runtimeCodepoints = {};
+const runtimeSvgs = {};
+export function registerIconSet(def) {
+    const codepoints = {};
+    const svgs = {};
+    for (const [name, g] of Object.entries(def.glyphs)) {
+        if (g.codepoint !== undefined)
+            codepoints[name] = g.codepoint;
+        if (g.svg)
+            svgs[name] = g.svg;
+    }
+    if (Object.keys(codepoints).length > 0)
+        runtimeCodepoints[def.id] = codepoints;
+    if (Object.keys(svgs).length > 0)
+        runtimeSvgs[def.id] = svgs;
+}
+export function lookupCodepoint(buildTime, set, name) {
+    return buildTime[set]?.[name] ?? runtimeCodepoints[set]?.[name];
+}
+export function lookupSvg(buildTime, set, name) {
+    return buildTime[set]?.[name] ?? runtimeSvgs[set]?.[name];
+}
+export function lookupGlyph(buildTimeCodepoints, buildTimeSvgs, set, name) {
+    const svg = lookupSvg(buildTimeSvgs, set, name);
+    if (svg)
+        return { svg };
+    const codepoint = lookupCodepoint(buildTimeCodepoints, set, name);
+    if (codepoint !== undefined)
+        return { codepoint };
+    return undefined;
+}

package/dist/stubs/codepoints.d.ts

@@ -1,4 +1,4 @@
-import type { CodepointMap } from '../types';
+import type { CodepointMap } from '../types.js';
 /**
  * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an
  * Rspack alias at build time, populating it with the codepoints used by the

package/dist/stubs/codepoints.js

@@ -1,6 +1,8 @@
-//#region src/stubs/codepoints.ts
-var e = {};
-//#endregion
-export { e as codepoints };
-
-//# sourceMappingURL=codepoints.js.map
+/**
+ * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an
+ * Rspack alias at build time, populating it with the codepoints used by the
+ * app's `<Icon>` calls. Without the plugin, no built-in sets are registered
+ * and all icons fall back to `defineIconSet`-registered sets (if any) or the
+ * missing-glyph placeholder.
+ */
+export const codepoints = {};

package/dist/stubs/codepoints.ts

@@ -1,4 +1,4 @@
-import type { CodepointMap } from '../types';
+import type { CodepointMap } from '../types.js';
 
 /**
  * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an

package/dist/stubs/svgs.d.ts

@@ -1,4 +1,4 @@
-import type { SvgMap } from '../types';
+import type { SvgMap } from '../types.js';
 /**
  * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an
  * Rspack alias at build time, populating it with the SVG path data for the

package/dist/stubs/svgs.js

@@ -1,6 +1,6 @@
-//#region src/stubs/svgs.ts
-var e = {};
-//#endregion
-export { e as svgs };
-
-//# sourceMappingURL=svgs.js.map
+/**
+ * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an
+ * Rspack alias at build time, populating it with the SVG path data for the
+ * icons used by the app's `<Icon>` calls.
+ */
+export const svgs = {};

package/dist/stubs/svgs.ts

@@ -1,4 +1,4 @@
-import type { SvgMap } from '../types';
+import type { SvgMap } from '../types.js';
 
 /**
  * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an

package/dist/types.d.ts

@@ -1,3 +1,61 @@
+/**
+ * Augmentation point for theme / extension packages. Declaration-merge
+ * into this interface to add fields that `<Icon>` accepts beyond the
+ * core props. The pinned components in adapter packages and the daisy
+ * navigation primitives inherit the augmentation automatically via
+ * intersection.
+ *
+ * `@sigx/lynx-icons` deliberately knows nothing about themes — the
+ * extension shape is up to whatever theme is installed. Daisy adds a
+ * `variant?: DaisyColor` field; a custom theme could add anything else
+ * (`tone?: 'muted' | 'loud'`, `tint?: number`, …) and provide its own
+ * resolver.
+ *
+ * @example
+ * ```ts
+ * // In a theme package:
+ * declare module '@sigx/lynx-icons' {
+ *     interface IconPropsExtensions {
+ *         variant?: 'primary' | 'secondary' | 'accent';
+ *     }
+ * }
+ * ```
+ */
+export interface IconPropsExtensions {
+}
+/**
+ * Function form provided to `useIconColorResolver`. Receives the full
+ * `<Icon>` props (including whatever fields the active theme augmented
+ * onto `IconPropsExtensions`) and returns a **CSS color value**
+ * substituted into the rendered SVG's `fill=` attribute. Return
+ * `undefined` to fall through to `props.color` / `currentColor`.
+ *
+ * Color rather than class: Lynx's `<svg content=…>` parses the inline
+ * SVG markup as a standalone fragment that doesn't inherit `color` CSS
+ * from the host element. Substituting the value into the markup is the
+ * only reliable way to make theme tokens show through.
+ *
+ * Props rather than a single variant string: the core has no opinion on
+ * how a theme keys its colors. A theme picks whichever augmented field
+ * (or combination) makes sense and reads it from `props` itself.
+ */
+export type IconColorResolver = (props: Readonly<Record<string, unknown>>) => string | undefined;
+/**
+ * Lightweight `{ set, name }` reference to an icon in a registered set —
+ * the canonical "data" form a consumer can pass to a UI primitive that
+ * accepts an icon (e.g. `<Tabs.Screen icon={{ set: 'lucide', name: 'map' }}>`).
+ *
+ * The receiving component (e.g. `<NavTabBar>`, `<NavHeader>`) is responsible
+ * for turning the spec into rendered JSX — typically by composing
+ * `<Icon set={spec.set} name={spec.name} color="currentColor" size={…}>`
+ * with theme-aware wrapping. Consumers who want full control (custom
+ * color, third-party component, size override) pass JSX directly instead
+ * of a spec.
+ */
+export interface IconSpec {
+    readonly set: string;
+    readonly name: string;
+}
 /**
  * Per-glyph vector data. Used by SVG-mode rendering.
  *

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-icons",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Icon component and registry for sigx-lynx — works with adapter packages like @sigx/lynx-icons-fa-free and @sigx/lynx-icons-lucide.",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,12 +35,12 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@sigx/lynx": "^0.4.0"
+    "@sigx/lynx": "^0.4.2"
   },
   "devDependencies": {
-    "@sigx/vite": "^0.4.3",
+    "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "typescript": "^6.0.3",
-    "@sigx/lynx": "^0.4.0"
+    "@sigx/lynx": "^0.4.2"
   },
   "author": "Andreas Ekdahl",
   "license": "MIT",
@@ -66,7 +66,8 @@
     "lucide"
   ],
   "scripts": {
-    "build": "vite build && tsgo --emitDeclarationOnly && node ../../scripts/copy-assets.mjs src/stubs dist/stubs",
-    "dev": "vite build --watch"
+    "build": "node ../../scripts/clean.mjs dist && tsgo && node ../../scripts/copy-assets.mjs src/stubs dist/stubs",
+    "dev": "tsgo --watch",
+    "clean": "node ../../scripts/clean.mjs dist .turbo"
   }
 }

package/dist/defineIconSet-BIFjZq08.js

@@ -1,28 +0,0 @@
-//#region src/registry.ts
-var e = {}, t = {};
-function n(n) {
-	let r = {}, i = {};
-	for (let [e, t] of Object.entries(n.glyphs)) t.codepoint !== void 0 && (r[e] = t.codepoint), t.svg && (i[e] = t.svg);
-	Object.keys(r).length > 0 && (e[n.id] = r), Object.keys(i).length > 0 && (t[n.id] = i);
-}
-function r(t, n, r) {
-	return t[n]?.[r] ?? e[n]?.[r];
-}
-function i(e, n, r) {
-	return e[n]?.[r] ?? t[n]?.[r];
-}
-function a(e, t, n, a) {
-	let o = i(t, n, a);
-	if (o) return { svg: o };
-	let s = r(e, n, a);
-	if (s !== void 0) return { codepoint: s };
-}
-//#endregion
-//#region src/defineIconSet.ts
-function o(e) {
-	return n(e), e;
-}
-//#endregion
-export { a as n, o as t };
-
-//# sourceMappingURL=defineIconSet-BIFjZq08.js.map

package/dist/defineIconSet-BIFjZq08.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defineIconSet-BIFjZq08.js","names":[],"sources":["../src/registry.ts","../src/defineIconSet.ts"],"sourcesContent":["import type { CodepointMap, GlyphSvg, IconSetDef, SvgMap } from './types';\n\nconst runtimeCodepoints: CodepointMap = {};\nconst runtimeSvgs: SvgMap = {};\n\nexport function registerIconSet(def: IconSetDef): void {\n    const codepoints: Record<string, number> = {};\n    const svgs: Record<string, GlyphSvg> = {};\n    for (const [name, g] of Object.entries(def.glyphs)) {\n        if (g.codepoint !== undefined) codepoints[name] = g.codepoint;\n        if (g.svg) svgs[name] = g.svg;\n    }\n    if (Object.keys(codepoints).length > 0) runtimeCodepoints[def.id] = codepoints;\n    if (Object.keys(svgs).length > 0) runtimeSvgs[def.id] = svgs;\n}\n\nexport function lookupCodepoint(\n    buildTime: CodepointMap,\n    set: string,\n    name: string,\n): number | undefined {\n    return buildTime[set]?.[name] ?? runtimeCodepoints[set]?.[name];\n}\n\nexport function lookupSvg(\n    buildTime: SvgMap,\n    set: string,\n    name: string,\n): GlyphSvg | undefined {\n    return buildTime[set]?.[name] ?? runtimeSvgs[set]?.[name];\n}\n\nexport function lookupGlyph(\n    buildTimeCodepoints: CodepointMap,\n    buildTimeSvgs: SvgMap,\n    set: string,\n    name: string,\n): { codepoint?: number; svg?: GlyphSvg } | undefined {\n    const svg = lookupSvg(buildTimeSvgs, set, name);\n    if (svg) return { svg };\n\n    const codepoint = lookupCodepoint(buildTimeCodepoints, set, name);\n    if (codepoint !== undefined) return { codepoint };\n\n    return undefined;\n}\n","import { registerIconSet } from './registry';\nimport type { IconSetDef } from './types';\n\n/**\n * Register a custom icon set at module load time.\n *\n * Build-time sets declared in `signalx.config.ts` are auto-detected and\n * tree-shaken; `defineIconSet` is the escape hatch for ad-hoc sets defined\n * directly in app code (e.g. a small private set used in one screen).\n *\n * @example\n * ```ts\n * defineIconSet({\n *   id: 'brand',\n *   glyphs: {\n *     logo: {\n *       svg: {\n *         svg: '<svg viewBox=\"0 0 24 24\" fill=\"__COLOR__\"><path d=\"M3 12L12 3l9 9-9 9z\"/></svg>',\n *       },\n *     },\n *   },\n * });\n * ```\n *\n * The inner `svg` value is raw SVG markup. `__COLOR__` placeholders in that\n * markup get substituted with the user's `color` prop at render time.\n */\nexport function defineIconSet(def: IconSetDef): IconSetDef {\n    registerIconSet(def);\n    return def;\n}\n\nexport type { IconSetDef } from './types';\n"],"mappings":";AAEA,IAAM,IAAkC,EAAE,EACpC,IAAsB,EAAE;AAE9B,SAAgB,EAAgB,GAAuB;CACnD,IAAM,IAAqC,EAAE,EACvC,IAAiC,EAAE;CACzC,KAAK,IAAM,CAAC,GAAM,MAAM,OAAO,QAAQ,EAAI,OAAO,EAE9C,AADI,EAAE,cAAc,KAAA,MAAW,EAAW,KAAQ,EAAE,YAChD,EAAE,QAAK,EAAK,KAAQ,EAAE;CAG9B,AADI,OAAO,KAAK,EAAW,CAAC,SAAS,MAAG,EAAkB,EAAI,MAAM,IAChE,OAAO,KAAK,EAAK,CAAC,SAAS,MAAG,EAAY,EAAI,MAAM;;AAG5D,SAAgB,EACZ,GACA,GACA,GACkB;CAClB,OAAO,EAAU,KAAO,MAAS,EAAkB,KAAO;;AAG9D,SAAgB,EACZ,GACA,GACA,GACoB;CACpB,OAAO,EAAU,KAAO,MAAS,EAAY,KAAO;;AAGxD,SAAgB,EACZ,GACA,GACA,GACA,GACkD;CAClD,IAAM,IAAM,EAAU,GAAe,GAAK,EAAK;CAC/C,IAAI,GAAK,OAAO,EAAE,QAAK;CAEvB,IAAM,IAAY,EAAgB,GAAqB,GAAK,EAAK;CACjE,IAAI,MAAc,KAAA,GAAW,OAAO,EAAE,cAAW;;;;ACfrD,SAAgB,EAAc,GAA6B;CAEvD,OADA,EAAgB,EAAI,EACb"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/Icon.tsx"],"sourcesContent":["import { component, type Define } from '@sigx/lynx';\nimport { codepoints } from '@sigx/lynx-icons/__codepoints';\nimport { svgs } from '@sigx/lynx-icons/__svgs';\nimport '@sigx/lynx-icons/__font-face.css';\nimport { lookupGlyph } from './registry';\n\nexport type IconProps =\n    & Define.Prop<'set', string, true>\n    & Define.Prop<'name', string, true>\n    & Define.Prop<'size', number, false>\n    & Define.Prop<'color', string, false>\n    & Define.Prop<'class', string, false>;\n\n/**\n * Match a conservative subset of valid CSS color formats:\n * - `currentColor` and named colors (`red`, `dodgerblue`, `transparent` …)\n * - `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa`\n * - `rgb(...)` / `rgba(...)` / `hsl(...)` / `hsla(...)` with digits, dots,\n *   commas, percent signs, and whitespace inside the parens\n *\n * Anything else (quotes, angle brackets, ampersands, arbitrary HTML) falls\n * back to `currentColor`. The `color` prop ends up substituted directly into\n * the SVG markup that we hand to Lynx's `<svg content={…}>` parser, so a\n * value like `red\" stroke=\"…` would break out of the `fill=\"\"` attribute.\n * Allow-list, not escape-list — keeps the surface area provably small.\n */\nconst SAFE_COLOR_RE =\n    /^(?:currentColor|[a-zA-Z]+|#[0-9a-fA-F]{3,8}|(?:rgb|rgba|hsl|hsla)\\(\\s*[\\d.,%\\s]+\\))$/;\n\nexport function sanitizeColor(color: string): string {\n    return SAFE_COLOR_RE.test(color) ? color : 'currentColor';\n}\n\nexport function inlineSvg(template: string, color: string): string {\n    return template.replace(/__COLOR__/g, sanitizeColor(color));\n}\n\n/**\n * Render a glyph from a registered icon set.\n *\n * Sets are declared in `signalx.config.ts` via `iconSets: [...]` (build-time,\n * tree-shaken) or via `defineIconSet({ id, glyphs })` (runtime, ad-hoc).\n *\n * Resolution order: **SVG first**, then codepoint, then missing placeholder.\n *\n * - SVG-mode sets render with Lynx's native `<svg content={...}>` element\n *   (the engine parses the inline XML; no JSX children, no data: URIs).\n * - Font-mode sets fall back to a single character inside a `<text>` element\n *   with a matching `font-family`. The plugin only emits codepoints when the\n *   matching `@font-face` has also been registered (v1.1+); v1 always hits\n *   the SVG branch.\n * - Missing glyphs render an empty `<view>` of the same size so layout\n *   doesn't jump.\n *\n * @example\n * ```tsx\n * <Icon set=\"fa\" name=\"user\" size={20} color=\"#333\" />\n * <Icon set=\"lucide\" name=\"search\" size={16} />\n * ```\n */\nexport const Icon = component<IconProps>(({ props }) => {\n    return () => {\n        const size = props.size ?? 16;\n        const set = props.set;\n        const name = props.name;\n        const sizeStyle = { width: size, height: size } as const;\n\n        const glyph = lookupGlyph(codepoints, svgs, set, name);\n        if (glyph?.svg) {\n            const color = props.color ?? 'currentColor';\n            return (\n                <svg\n                    content={inlineSvg(glyph.svg.svg, color)}\n                    class={props.class}\n                    style={sizeStyle}\n                />\n            );\n        }\n\n        if (glyph?.codepoint !== undefined) {\n            const textStyle: Record<string, string | number> = {\n                fontFamily: set,\n                fontSize: size,\n                lineHeight: `${size}px`,\n                width: size,\n                height: size,\n            };\n            if (props.color) textStyle.color = props.color;\n            return (\n                <text class={props.class} style={textStyle}>\n                    {String.fromCodePoint(glyph.codepoint)}\n                </text>\n            );\n        }\n\n        return <view class={props.class} style={sizeStyle} />;\n    };\n});\n"],"mappings":";;;;;;;AA0BA,IAAM,IACF;AAEJ,SAAgB,EAAc,GAAuB;CACjD,OAAO,EAAc,KAAK,EAAM,GAAG,IAAQ;;AAG/C,SAAgB,EAAU,GAAkB,GAAuB;CAC/D,OAAO,EAAS,QAAQ,cAAc,EAAc,EAAM,CAAC;;AA0B/D,IAAa,IAAO,GAAsB,EAAE,qBAC3B;CACT,IAAM,IAAO,EAAM,QAAQ,IACrB,IAAM,EAAM,KACZ,IAAO,EAAM,MACb,IAAY;EAAE,OAAO;EAAM,QAAQ;EAAM,EAEzC,IAAQ,EAAY,GAAY,GAAM,GAAK,EAAK;CACtD,IAAI,GAAO,KAAK;EACZ,IAAM,IAAQ,EAAM,SAAS;EAC7B,OACI,kBAAC,OAAD;GACI,SAAS,EAAU,EAAM,IAAI,KAAK,EAAM;GACxC,OAAO,EAAM;GACb,OAAO;GACT,CAAA;;CAIV,IAAI,GAAO,cAAc,KAAA,GAAW;EAChC,IAAM,IAA6C;GAC/C,YAAY;GACZ,UAAU;GACV,YAAY,GAAG,EAAK;GACpB,OAAO;GACP,QAAQ;GACX;EAED,OADI,EAAM,UAAO,EAAU,QAAQ,EAAM,QAErC,kBAAC,QAAD;GAAM,OAAO,EAAM;GAAO,OAAO;aAC5B,OAAO,cAAc,EAAM,UAAU;GACnC,CAAA;;CAIf,OAAO,kBAAC,QAAD;EAAM,OAAO,EAAM;EAAO,OAAO;EAAa,CAAA;EAE3D"}

package/dist/stubs/codepoints.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"codepoints.js","names":[],"sources":["../../src/stubs/codepoints.ts"],"sourcesContent":["import type { CodepointMap } from '../types';\n\n/**\n * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an\n * Rspack alias at build time, populating it with the codepoints used by the\n * app's `<Icon>` calls. Without the plugin, no built-in sets are registered\n * and all icons fall back to `defineIconSet`-registered sets (if any) or the\n * missing-glyph placeholder.\n */\nexport const codepoints: CodepointMap = {};\n"],"mappings":";AASA,IAAa,IAA2B,EAAE"}

package/dist/stubs/svgs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"svgs.js","names":[],"sources":["../../src/stubs/svgs.ts"],"sourcesContent":["import type { SvgMap } from '../types';\n\n/**\n * Empty stub. The @sigx/lynx-plugin icons slice replaces this module via an\n * Rspack alias at build time, populating it with the SVG path data for the\n * icons used by the app's `<Icon>` calls.\n */\nexport const svgs: SvgMap = {};\n"],"mappings":";AAOA,IAAa,IAAe,EAAE"}