@effectweb/lucide 0.8.0 → 0.8.1

package/README.md

@@ -1,6 +1,6 @@
 # EffectWeb Lucide
 
-Lucide icons compiled to direct DOM views. The build generates the complete catalogue from pinned official `@lucide/icons` data using EffectWeb's Oxc compiler. Each mounted icon owns its SVG and updates it in place.
+Lucide icons as direct DOM views. The build generates the complete catalogue from pinned official `@lucide/icons` data; each icon module holds only its geometry, and a shared factory builds the SVG markup once per icon. Each mounted icon owns its SVG and updates it in place.
 
 Install `@effectweb/lucide` alongside `effectweb` and its declared Effect peer. For local use, run `npm run build` and `npm run test:package` from the repository root, then install the generated `artifacts/packages/effectweb-lucide-VERSION.tgz`.
 
@@ -48,6 +48,12 @@ This entry also exports `iconNames`, the `IconName` union, and `dynamicIconImpor
 
 ## Raw SVG and data
 
+Each direct icon module also exports `iconNode` (readonly SVG shape tuples, without
+upstream reconciliation keys) and `viewBox`. These are the same geometry used by
+the default view, so consumers that serialize icons for favicons can share their
+data with rendered icons. Alias modules re-export the same geometry identity.
+Treat the geometry as immutable; serialization should escape attribute values.
+
 ```ts
 import { Camera } from '@effectweb/lucide/data';
 import { buildLucideSvg, buildLucideDataUri } from '@effectweb/lucide/build';

package/dist/attributes.d.ts

@@ -1,4 +1,4 @@
-import type { JSX, View } from 'effectweb';
+import { type JSX, type View } from 'effectweb';
 export type LucideProps = JSX.IntrinsicElements['svg'] & {
     size?: number | string | undefined;
     color?: string | undefined;
@@ -9,7 +9,13 @@ export type LucideProps = JSX.IntrinsicElements['svg'] & {
 export type LucideIcon = View<LucideProps, never>;
 /** Keep icon-only options off the DOM; ordinary SVG attributes remain overridable. */
 export declare function iconAttributes(props: LucideProps, names: string, width: number, height: number): {
-    class: string;
+    id?: string | undefined;
+    slot?: string | undefined;
+    autofocus?: boolean | undefined;
+    nonce?: string | undefined;
+    tabIndex?: string | number | undefined;
+    tabindex?: number | undefined;
+    preserveAlpha?: 'true' | 'false' | undefined;
     onAbort?: JSX.EventHandler<SVGSVGElement, UIEvent> | undefined;
     onAnimationCancel?: JSX.EventHandler<SVGSVGElement, AnimationEvent> | undefined;
     onAnimationEnd?: JSX.EventHandler<SVGSVGElement, AnimationEvent> | undefined;
@@ -117,6 +123,126 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     onVolumeChange?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onWaiting?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onWheel?: JSX.EventHandler<SVGSVGElement, WheelEvent> | undefined;
+    classList?: Record<string, boolean | undefined> | undefined;
+    style?: string | JSX.CSSProperties | undefined;
+    use?: import("effectweb").DomMount<SVGSVGElement & Element> | undefined;
+    loading?: 'lazy' | 'eager' | undefined;
+    download?: string | boolean | undefined;
+    autocomplete?: string | undefined;
+    inputmode?: string | undefined;
+    spellcheck?: boolean | 'true' | 'false' | '' | undefined;
+    contenteditable?: boolean | 'true' | 'false' | 'plaintext-only' | 'inherit' | '' | undefined;
+    contentEditable?: boolean | 'true' | 'false' | 'plaintext-only' | 'inherit' | '' | undefined;
+    draggable?: boolean | 'true' | 'false' | undefined;
+    translate?: boolean | 'yes' | 'no' | '' | undefined;
+    part?: string | undefined;
+    exportparts?: string | undefined;
+    xmlns: string | number | undefined;
+    width: string | number | undefined;
+    height: string | number | undefined;
+    viewBox: string | number | undefined;
+    fill: string | number | undefined;
+    stroke: string | number | undefined;
+    'stroke-width': string | number | undefined;
+    'stroke-linecap': string | number | undefined;
+    'stroke-linejoin': string | number | undefined;
+    'aria-hidden': boolean | undefined;
+    role: string | undefined;
+    class: string;
+    accumulate?: string | number | undefined;
+    additive?: string | number | undefined;
+    "alignment-baseline"?: string | number | undefined;
+    amplitude?: string | number | undefined;
+    attributeName?: string | number | undefined;
+    attributeType?: string | number | undefined;
+    azimuth?: string | number | undefined;
+    baseFrequency?: string | number | undefined;
+    "baseline-shift"?: string | number | undefined;
+    begin?: string | number | undefined;
+    bias?: string | number | undefined;
+    by?: string | number | undefined;
+    calcMode?: string | number | undefined;
+    clip?: string | number | undefined;
+    "clip-path"?: string | number | undefined;
+    "clip-rule"?: string | number | undefined;
+    clipPathUnits?: string | number | undefined;
+    "color-interpolation"?: string | number | undefined;
+    "color-interpolation-filters"?: string | number | undefined;
+    crossorigin?: string | number | undefined;
+    cursor?: string | number | undefined;
+    cx?: string | number | undefined;
+    cy?: string | number | undefined;
+    d?: string | number | undefined;
+    diffuseConstant?: string | number | undefined;
+    direction?: string | number | undefined;
+    display?: string | number | undefined;
+    divisor?: string | number | undefined;
+    "dominant-baseline"?: string | number | undefined;
+    dur?: string | number | undefined;
+    dx?: string | number | undefined;
+    dy?: string | number | undefined;
+    edgeMode?: string | number | undefined;
+    elevation?: string | number | undefined;
+    end?: string | number | undefined;
+    exponent?: string | number | undefined;
+    "fill-opacity"?: string | number | undefined;
+    "fill-rule"?: string | number | undefined;
+    filter?: string | number | undefined;
+    filterUnits?: string | number | undefined;
+    "flood-color"?: string | number | undefined;
+    "flood-opacity"?: string | number | undefined;
+    "font-family"?: string | number | undefined;
+    "font-size"?: string | number | undefined;
+    "font-size-adjust"?: string | number | undefined;
+    "font-stretch"?: string | number | undefined;
+    "font-style"?: string | number | undefined;
+    "font-variant"?: string | number | undefined;
+    "font-weight"?: string | number | undefined;
+    fr?: string | number | undefined;
+    from?: string | number | undefined;
+    fx?: string | number | undefined;
+    fy?: string | number | undefined;
+    "glyph-orientation-horizontal"?: string | number | undefined;
+    "glyph-orientation-vertical"?: string | number | undefined;
+    gradientTransform?: string | number | undefined;
+    gradientUnits?: string | number | undefined;
+    href?: string | number | undefined;
+    hreflang?: string | number | undefined;
+    "image-rendering"?: string | number | undefined;
+    in?: string | number | undefined;
+    in2?: string | number | undefined;
+    intercept?: string | number | undefined;
+    k1?: string | number | undefined;
+    k2?: string | number | undefined;
+    k3?: string | number | undefined;
+    k4?: string | number | undefined;
+    kernelMatrix?: string | number | undefined;
+    kernelUnitLength?: string | number | undefined;
+    keyPoints?: string | number | undefined;
+    keySplines?: string | number | undefined;
+    keyTimes?: string | number | undefined;
+    lang?: string | number | undefined;
+    lengthAdjust?: string | number | undefined;
+    "letter-spacing"?: string | number | undefined;
+    "lighting-color"?: string | number | undefined;
+    limitingConeAngle?: string | number | undefined;
+    "marker-end"?: string | number | undefined;
+    "marker-mid"?: string | number | undefined;
+    "marker-start"?: string | number | undefined;
+    markerHeight?: string | number | undefined;
+    markerUnits?: string | number | undefined;
+    markerWidth?: string | number | undefined;
+    mask?: string | number | undefined;
+    "mask-type"?: string | number | undefined;
+    maskContentUnits?: string | number | undefined;
+    maskUnits?: string | number | undefined;
+    max?: string | number | undefined;
+    media?: string | number | undefined;
+    method?: string | number | undefined;
+    min?: string | number | undefined;
+    mode?: string | number | undefined;
+    numOctaves?: string | number | undefined;
+    offset?: string | number | undefined;
     onAbortCapture?: JSX.EventHandler<SVGSVGElement, UIEvent> | undefined;
     onAnimationCancelCapture?: JSX.EventHandler<SVGSVGElement, AnimationEvent> | undefined;
     onAnimationEndCapture?: JSX.EventHandler<SVGSVGElement, AnimationEvent> | undefined;
@@ -127,9 +253,9 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     onBeforeMatchCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onBeforeToggleCapture?: JSX.EventHandler<SVGSVGElement, ToggleEvent> | undefined;
     onBlurCapture?: JSX.EventHandler<SVGSVGElement, FocusEvent> | undefined;
-    onCancelCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onCanPlayCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onCanPlayThroughCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
+    onCancelCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onChangeCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onClickCapture?: JSX.EventHandler<SVGSVGElement, PointerEvent> | undefined;
     onCloseCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
@@ -169,9 +295,9 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     onKeyPressCapture?: JSX.EventHandler<SVGSVGElement, KeyboardEvent> | undefined;
     onKeyUpCapture?: JSX.EventHandler<SVGSVGElement, KeyboardEvent> | undefined;
     onLoadCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
+    onLoadStartCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onLoadedDataCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onLoadedMetadataCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
-    onLoadStartCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onLostPointerCaptureCapture?: JSX.EventHandler<SVGSVGElement, PointerEvent> | undefined;
     onMouseDownCapture?: JSX.EventHandler<SVGSVGElement, MouseEvent> | undefined;
     onMouseEnterCapture?: JSX.EventHandler<SVGSVGElement, MouseEvent> | undefined;
@@ -205,8 +331,8 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     onSeekedCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onSeekingCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onSelectCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
-    onSelectionChangeCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onSelectStartCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
+    onSelectionChangeCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onSlotChangeCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onStalledCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onSubmitCapture?: JSX.EventHandler<SVGSVGElement, SubmitEvent> | undefined;
@@ -224,128 +350,6 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     onVolumeChangeCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onWaitingCapture?: JSX.EventHandler<SVGSVGElement, Event> | undefined;
     onWheelCapture?: JSX.EventHandler<SVGSVGElement, WheelEvent> | undefined;
-    slot?: string | undefined;
-    autofocus?: boolean | undefined;
-    id?: string | undefined;
-    tabindex?: number | undefined;
-    tabIndex?: string | number | undefined;
-    classList?: Record<string, boolean | undefined> | undefined;
-    style?: string | JSX.CSSProperties | undefined;
-    use?: import("effectweb").DomMount<SVGSVGElement & Element> | undefined;
-    role: string | undefined;
-    nonce?: string | undefined;
-    loading?: "lazy" | "eager" | undefined;
-    download?: string | boolean | undefined;
-    autocomplete?: string | undefined;
-    inputmode?: string | undefined;
-    spellcheck?: boolean | "true" | "false" | "" | undefined;
-    contenteditable?: boolean | "true" | "false" | "plaintext-only" | "inherit" | "" | undefined;
-    contentEditable?: boolean | "true" | "false" | "plaintext-only" | "inherit" | "" | undefined;
-    draggable?: boolean | "true" | "false" | undefined;
-    translate?: boolean | "yes" | "no" | "" | undefined;
-    part?: string | undefined;
-    exportparts?: string | undefined;
-    filter?: string | number | undefined;
-    mask?: string | number | undefined;
-    path?: string | number | undefined;
-    crossorigin?: string | number | undefined;
-    height: string | number | undefined;
-    href?: string | number | undefined;
-    hreflang?: string | number | undefined;
-    lang?: string | number | undefined;
-    max?: string | number | undefined;
-    media?: string | number | undefined;
-    method?: string | number | undefined;
-    min?: string | number | undefined;
-    ping?: string | number | undefined;
-    target?: string | number | undefined;
-    type?: string | number | undefined;
-    width: string | number | undefined;
-    accumulate?: string | number | undefined;
-    additive?: string | number | undefined;
-    "alignment-baseline"?: string | number | undefined;
-    amplitude?: string | number | undefined;
-    attributeName?: string | number | undefined;
-    attributeType?: string | number | undefined;
-    azimuth?: string | number | undefined;
-    baseFrequency?: string | number | undefined;
-    "baseline-shift"?: string | number | undefined;
-    begin?: string | number | undefined;
-    bias?: string | number | undefined;
-    by?: string | number | undefined;
-    calcMode?: string | number | undefined;
-    clip?: string | number | undefined;
-    "clip-path"?: string | number | undefined;
-    "clip-rule"?: string | number | undefined;
-    clipPathUnits?: string | number | undefined;
-    "color-interpolation"?: string | number | undefined;
-    "color-interpolation-filters"?: string | number | undefined;
-    cursor?: string | number | undefined;
-    cx?: string | number | undefined;
-    cy?: string | number | undefined;
-    d?: string | number | undefined;
-    diffuseConstant?: string | number | undefined;
-    direction?: string | number | undefined;
-    display?: string | number | undefined;
-    divisor?: string | number | undefined;
-    "dominant-baseline"?: string | number | undefined;
-    dur?: string | number | undefined;
-    dx?: string | number | undefined;
-    dy?: string | number | undefined;
-    edgeMode?: string | number | undefined;
-    elevation?: string | number | undefined;
-    end?: string | number | undefined;
-    exponent?: string | number | undefined;
-    fill: string | number | undefined;
-    "fill-opacity"?: string | number | undefined;
-    "fill-rule"?: string | number | undefined;
-    filterUnits?: string | number | undefined;
-    "flood-color"?: string | number | undefined;
-    "flood-opacity"?: string | number | undefined;
-    "font-family"?: string | number | undefined;
-    "font-size"?: string | number | undefined;
-    "font-size-adjust"?: string | number | undefined;
-    "font-stretch"?: string | number | undefined;
-    "font-style"?: string | number | undefined;
-    "font-variant"?: string | number | undefined;
-    "font-weight"?: string | number | undefined;
-    fr?: string | number | undefined;
-    from?: string | number | undefined;
-    fx?: string | number | undefined;
-    fy?: string | number | undefined;
-    "glyph-orientation-horizontal"?: string | number | undefined;
-    "glyph-orientation-vertical"?: string | number | undefined;
-    gradientTransform?: string | number | undefined;
-    gradientUnits?: string | number | undefined;
-    "image-rendering"?: string | number | undefined;
-    in?: string | number | undefined;
-    in2?: string | number | undefined;
-    intercept?: string | number | undefined;
-    k1?: string | number | undefined;
-    k2?: string | number | undefined;
-    k3?: string | number | undefined;
-    k4?: string | number | undefined;
-    kernelMatrix?: string | number | undefined;
-    kernelUnitLength?: string | number | undefined;
-    keyPoints?: string | number | undefined;
-    keySplines?: string | number | undefined;
-    keyTimes?: string | number | undefined;
-    lengthAdjust?: string | number | undefined;
-    "letter-spacing"?: string | number | undefined;
-    "lighting-color"?: string | number | undefined;
-    limitingConeAngle?: string | number | undefined;
-    "marker-end"?: string | number | undefined;
-    "marker-mid"?: string | number | undefined;
-    "marker-start"?: string | number | undefined;
-    markerHeight?: string | number | undefined;
-    markerUnits?: string | number | undefined;
-    markerWidth?: string | number | undefined;
-    "mask-type"?: string | number | undefined;
-    maskContentUnits?: string | number | undefined;
-    maskUnits?: string | number | undefined;
-    mode?: string | number | undefined;
-    numOctaves?: string | number | undefined;
-    offset?: string | number | undefined;
     opacity?: string | number | undefined;
     operator?: string | number | undefined;
     order?: string | number | undefined;
@@ -353,10 +357,12 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     origin?: string | number | undefined;
     overflow?: string | number | undefined;
     "paint-order"?: string | number | undefined;
+    path?: string | number | undefined;
     pathLength?: string | number | undefined;
     patternContentUnits?: string | number | undefined;
     patternTransform?: string | number | undefined;
     patternUnits?: string | number | undefined;
+    ping?: string | number | undefined;
     "pointer-events"?: string | number | undefined;
     points?: string | number | undefined;
     pointsAtX?: string | number | undefined;
@@ -390,17 +396,14 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     stitchTiles?: string | number | undefined;
     "stop-color"?: string | number | undefined;
     "stop-opacity"?: string | number | undefined;
-    stroke: string | number | undefined;
     "stroke-dasharray"?: string | number | undefined;
     "stroke-dashoffset"?: string | number | undefined;
-    'stroke-linecap': string | number | undefined;
-    'stroke-linejoin': string | number | undefined;
     "stroke-miterlimit"?: string | number | undefined;
     "stroke-opacity"?: string | number | undefined;
-    'stroke-width': string | number | undefined;
     surfaceScale?: string | number | undefined;
     systemLanguage?: string | number | undefined;
     tableValues?: string | number | undefined;
+    target?: string | number | undefined;
     targetX?: string | number | undefined;
     targetY?: string | number | undefined;
     "text-anchor"?: string | number | undefined;
@@ -410,10 +413,10 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     to?: string | number | undefined;
     transform?: string | number | undefined;
     "transform-origin"?: string | number | undefined;
+    type?: string | number | undefined;
     "unicode-bidi"?: string | number | undefined;
     values?: string | number | undefined;
     "vector-effect"?: string | number | undefined;
-    viewBox: string | number | undefined;
     visibility?: string | number | undefined;
     "word-spacing"?: string | number | undefined;
     "writing-mode"?: string | number | undefined;
@@ -421,12 +424,20 @@ export declare function iconAttributes(props: LucideProps, names: string, width:
     x1?: string | number | undefined;
     x2?: string | number | undefined;
     xChannelSelector?: string | number | undefined;
-    xmlns: string | number | undefined;
     y?: string | number | undefined;
     y1?: string | number | undefined;
     y2?: string | number | undefined;
     yChannelSelector?: string | number | undefined;
     z?: string | number | undefined;
-    preserveAlpha?: "true" | "false" | undefined;
-    'aria-hidden': boolean | undefined;
 };
+/** One SVG shape: tag, attributes and optional nested shapes, as published by Lucide. */
+export type IconNode = readonly [
+    tag: string,
+    attributes: Readonly<Record<string, string | number>>,
+    children?: readonly IconNode[]
+];
+/**
+ * Define an icon view from Lucide geometry. The shapes never change, so their markup is built
+ * once per stroke mode and shared by every mounted instance.
+ */
+export declare function lucideIcon(names: string, width: number, height: number, nodes: readonly IconNode[]): LucideIcon;

package/dist/attributes.js

@@ -1,20 +1,56 @@
-/** Keep icon-only options off the DOM; ordinary SVG attributes remain overridable. */
-export function iconAttributes(props, names, width, height) {
-    const { size = 24, color = 'currentColor', strokeWidth = 2, absoluteStrokeWidth: _absolute, title, children: _children, class: className, ...attributes } = props;
-    const labelled = Boolean(title || attributes['aria-label'] || attributes['aria-labelledby']);
-    return {
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: size,
-        height: size,
-        viewBox: `0 0 ${width} ${height}`,
-        fill: 'none',
-        stroke: color,
-        'stroke-width': strokeWidth,
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        'aria-hidden': labelled ? undefined : true,
-        role: labelled ? 'img' : undefined,
-        ...attributes,
-        class: ['lucide', names, className].filter(Boolean).join(' '),
-    };
+import { view } from "effectweb";
+import { markup } from "effectweb/dom";
+function iconAttributes(props, names, width, height) {
+  const {
+    size = 24,
+    color = "currentColor",
+    strokeWidth = 2,
+    absoluteStrokeWidth: _absolute,
+    title,
+    children: _children,
+    class: className,
+    ...attributes
+  } = props;
+  const labelled = Boolean(title || attributes["aria-label"] || attributes["aria-labelledby"]);
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: `0 0 ${width} ${height}`,
+    fill: "none",
+    stroke: color,
+    "stroke-width": strokeWidth,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": labelled ? void 0 : true,
+    role: labelled ? "img" : void 0,
+    ...attributes,
+    class: ["lucide", names, className].filter(Boolean).join(" ")
+  };
 }
+const factories = /* @__PURE__ */ new Map();
+const factory = (tag) => {
+  let render = factories.get(tag);
+  if (!render) factories.set(tag, render = markup(tag));
+  return render;
+};
+const shape = ([tag, attributes, children], absolute) => factory(tag)(
+  absolute ? { "vector-effect": "non-scaling-stroke", ...attributes } : attributes,
+  ...(children ?? []).map((child) => shape(child, absolute))
+);
+function lucideIcon(names, width, height, nodes) {
+  const geometry = [];
+  const shapes = (absolute) => geometry[absolute ? 1 : 0] ??= nodes.map((node) => shape(node, absolute));
+  return view(
+    (props) => factory("svg")(
+      iconAttributes(props, names, width, height),
+      props.title ? factory("title")(null, props.title) : null,
+      ...shapes(Boolean(props.absoluteStrokeWidth)),
+      props.children
+    )
+  );
+}
+export {
+  iconAttributes,
+  lucideIcon
+};

package/dist/build.js

@@ -1,2 +1 @@
-/** Upstream SVG/DOM/data-URI builders; no component catalogue is imported. */
-export * from '@lucide/icons/build';
+export * from "@lucide/icons/build";

package/dist/data.js

@@ -1,2 +1 @@
-/** Framework-neutral geometry. Import this entry only when you need icon data. */
-export * from '@lucide/icons';
+export * from "@lucide/icons";