juxscript 1.1.113 → 1.1.115

package/css-classes-inventory.json

@@ -1,6 +1,6 @@
 {
-  "totalFiles": 67,
-  "totalClasses": 196,
+  "totalFiles": 69,
+  "totalClasses": 203,
   "classList": [
     "?",
     "jux-alert",
@@ -99,6 +99,13 @@
     "jux-input-required",
     "jux-input-with-icon",
     "jux-layer",
+    "jux-link",
+    "jux-link-active",
+    "jux-link-disabled",
+    "jux-link-icon",
+    "jux-link-icon-left",
+    "jux-link-icon-right",
+    "jux-link-text",
     "jux-list",
     "jux-list-header",
     "jux-list-item",
@@ -3694,6 +3701,180 @@
         }
       ]
     },
+    {
+      "file": "link.js",
+      "path": "link.js",
+      "methods": {
+        "render": [
+          "jux-link",
+          "jux-link-active",
+          "jux-link-disabled",
+          "jux-link-icon",
+          "jux-link-icon-left",
+          "jux-link-icon-right",
+          "jux-link-text"
+        ]
+      },
+      "allClasses": [
+        "jux-link",
+        "jux-link-active",
+        "jux-link-disabled",
+        "jux-link-icon",
+        "jux-link-icon-left",
+        "jux-link-icon-right",
+        "jux-link-text"
+      ],
+      "classCount": 7,
+      "domStructures": [
+        {
+          "method": "render",
+          "elements": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null
+            }
+          ],
+          "hierarchy": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null,
+              "orphan": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "file": "link.ts",
+      "path": "link.ts",
+      "methods": {
+        "render": [
+          "jux-link",
+          "jux-link-active",
+          "jux-link-disabled",
+          "jux-link-icon",
+          "jux-link-icon-left",
+          "jux-link-icon-right",
+          "jux-link-text"
+        ]
+      },
+      "allClasses": [
+        "jux-link",
+        "jux-link-active",
+        "jux-link-disabled",
+        "jux-link-icon",
+        "jux-link-icon-left",
+        "jux-link-icon-right",
+        "jux-link-text"
+      ],
+      "classCount": 7,
+      "domStructures": [
+        {
+          "method": "render",
+          "elements": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null
+            }
+          ],
+          "hierarchy": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null,
+              "orphan": true
+            }
+          ]
+        }
+      ]
+    },
     {
       "file": "list.js",
       "path": "list.js",
@@ -7989,6 +8170,13 @@
       "jux-input-counter",
       "jux-input-with-icon",
       "jux-layer",
+      "jux-link",
+      "jux-link-active",
+      "jux-link-disabled",
+      "jux-link-icon",
+      "jux-link-icon-left",
+      "jux-link-icon-right",
+      "jux-link-text",
       "jux-list",
       "jux-list-header",
       "jux-list-item",

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
-  "totalComponents": 67,
-  "generatedAt": "2026-02-13T02:44:21.345Z",
+  "totalComponents": 69,
+  "generatedAt": "2026-02-13T03:14:49.691Z",
   "components": [
     {
       "file": "alert.js",
@@ -2862,6 +2862,138 @@
         }
       ]
     },
+    {
+      "file": "link.js",
+      "path": "link.js",
+      "domStructures": [
+        {
+          "method": "render",
+          "elements": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null
+            }
+          ],
+          "hierarchy": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null,
+              "orphan": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "file": "link.ts",
+      "path": "link.ts",
+      "domStructures": [
+        {
+          "method": "render",
+          "elements": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null
+            }
+          ],
+          "hierarchy": [
+            {
+              "tag": "a",
+              "classes": [
+                "jux-link",
+                "jux-link-active",
+                "jux-link-disabled"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-icon",
+                "jux-link-icon-left",
+                "jux-link-icon-right"
+              ],
+              "id": null,
+              "orphan": true
+            },
+            {
+              "tag": "span",
+              "classes": [
+                "jux-link-text"
+              ],
+              "id": null,
+              "orphan": true
+            }
+          ]
+        }
+      ]
+    },
     {
       "file": "list.js",
       "path": "list.js",

package/index.d.ts

@@ -22,6 +22,7 @@ import { icon } from './lib/components/icon.js';
 import { image } from './lib/components/image.js';
 import { include } from './lib/components/include.js';
 import { input } from './lib/components/input.js';
+import { link, navLink, externalLink } from './lib/components/link.js';
 import { list } from './lib/components/list.js';
 import { loading } from './lib/components/loading.js';
 import { menu } from './lib/components/menu.js';
@@ -50,8 +51,13 @@ export { state, registry, stateHistory };
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
 import { ZStack, zstack } from './lib/components/stack/ZStack.js';
+export { Link, link, navLink, externalLink } from './lib/components/link.js';
+export type { LinkOptions } from './lib/components/link.js';
 export { Layer, layer, gradient, overlay, glassLayer, animatedGradient } from './lib/components/layer.js';
 export type { LayerOptions, LayerPreset } from './lib/components/layer.js';
+/**
+ * JUX Namespace - Main API
+ */
 export declare const jux: {
     alert: typeof alert;
     app: typeof app;
@@ -77,6 +83,9 @@ export declare const jux: {
     include: typeof include;
     input: typeof input;
     list: typeof list;
+    link: typeof link;
+    navLink: typeof navLink;
+    externalLink: typeof externalLink;
     loading: typeof loading;
     menu: typeof menu;
     modal: typeof modal;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -22,6 +22,7 @@ import { icon } from './lib/components/icon.js';
 import { image } from './lib/components/image.js';
 import { include } from './lib/components/include.js';
 import { input } from './lib/components/input.js';
+import { link, navLink, externalLink } from './lib/components/link.js';
 import { list } from './lib/components/list.js';
 import { loading } from './lib/components/loading.js';
 import { menu } from './lib/components/menu.js';
@@ -53,10 +54,15 @@ export { state, registry, stateHistory }; // ✅ Export history
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
 import { ZStack, zstack } from './lib/components/stack/ZStack.js';
+// ✅ Link component
+export { Link, link, navLink, externalLink } from './lib/components/link.js';
 // ✅ Layer component
 export { Layer, layer, gradient, overlay, glassLayer, animatedGradient } from './lib/components/layer.js';
-// Utilities
+/**
+ * JUX Namespace - Main API
+ */
 export const jux = {
+    // Existing components
     alert,
     app,
     badge,
@@ -81,6 +87,9 @@ export const jux = {
     include,
     input,
     list,
+    link,
+    navLink,
+    externalLink,
     loading,
     menu,
     modal,

package/lib/components/link.d.ts

@@ -0,0 +1,41 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface LinkOptions {
+    href?: string;
+    text?: string;
+    icon?: string;
+    iconPosition?: 'left' | 'right';
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    external?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    style?: string;
+    class?: string;
+}
+interface LinkState extends BaseState {
+    href: string;
+    text: string;
+    icon: string;
+    iconPosition: 'left' | 'right';
+    target: string;
+    external: boolean;
+    active: boolean;
+}
+export declare class Link extends BaseComponent<LinkState> {
+    constructor(id: string, options?: LinkOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    href(value: string): this;
+    text(value: string): this;
+    icon(value: string): this;
+    iconPosition(value: 'left' | 'right'): this;
+    target(value: '_self' | '_blank' | '_parent' | '_top'): this;
+    external(value?: boolean): this;
+    active(value?: boolean): this;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+    update(prop: string, value: any): void;
+}
+export declare function link(id: string, options?: LinkOptions): Link;
+export declare function navLink(id: string, text?: string): Link;
+export declare function externalLink(id: string, href: string, text?: string): Link;
+export {};
+//# sourceMappingURL=link.d.ts.map

package/lib/components/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,WAAW;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,SAAU,SAAQ,SAAS;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBAClC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAkBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASzB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAYzB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAK3C,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI;IAS5D,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAQrC,MAAM,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAanC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAyFlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAiCzC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE;AAGD,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAKvD;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAQ1E"}

package/lib/components/link.js

@@ -0,0 +1,216 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['click'];
+export class Link extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            visible: true,
+            disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            href: options.href ?? `/${id}`,
+            text: options.text ?? formatIdAsLabel(id),
+            icon: options.icon ?? '',
+            iconPosition: options.iconPosition ?? 'left',
+            target: options.target ?? '_self',
+            external: options.external ?? false,
+            active: options.active ?? false
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    href(value) {
+        this.state.href = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link)
+                link.href = value;
+        }
+        return this;
+    }
+    text(value) {
+        this.state.text = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link) {
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode)
+                    textNode.textContent = value;
+            }
+        }
+        return this;
+    }
+    icon(value) {
+        this.state.icon = value;
+        return this;
+    }
+    iconPosition(value) {
+        this.state.iconPosition = value;
+        return this;
+    }
+    target(value) {
+        this.state.target = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link)
+                link.target = value;
+        }
+        return this;
+    }
+    external(value = true) {
+        this.state.external = value;
+        if (value) {
+            this.state.target = '_blank';
+        }
+        return this;
+    }
+    active(value = true) {
+        this.state.active = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link)
+                link.classList.toggle('jux-link-active', value);
+        }
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { href, text, icon, iconPosition, target, external, active, disabled, style, class: className } = this.state;
+        const link = document.createElement('a');
+        link.id = this._id;
+        link.className = 'jux-link';
+        if (active)
+            link.classList.add('jux-link-active');
+        if (disabled)
+            link.classList.add('jux-link-disabled');
+        if (className)
+            link.className += ` ${className}`;
+        if (style)
+            link.setAttribute('style', style);
+        link.href = href;
+        link.target = target;
+        // Add rel for external links
+        if (external || target === '_blank') {
+            link.rel = 'noopener noreferrer';
+        }
+        // Mark as external link for router to ignore
+        if (external) {
+            link.dataset.router = 'false';
+        }
+        // Icon (left position)
+        if (icon && iconPosition === 'left') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-left';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+        // Text
+        const textEl = document.createElement('span');
+        textEl.className = 'jux-link-text';
+        textEl.textContent = text;
+        link.appendChild(textEl);
+        // Icon (right position)
+        if (icon && iconPosition === 'right') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-right';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+        // Wire events
+        this._wireStandardEvents(link);
+        // Fire click callback
+        link.addEventListener('click', (e) => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            this._triggerCallback('click', href);
+        });
+        // Sync href changes
+        const hrefSync = this._syncBindings.find(b => b.property === 'href');
+        if (hrefSync) {
+            const transform = hrefSync.toComponent || ((v) => String(v));
+            hrefSync.stateObj.subscribe((val) => {
+                this.href(transform(val));
+            });
+        }
+        // Sync text changes
+        const textSync = this._syncBindings.find(b => b.property === 'text');
+        if (textSync) {
+            const transform = textSync.toComponent || ((v) => String(v));
+            textSync.stateObj.subscribe((val) => {
+                this.text(transform(val));
+            });
+        }
+        container.appendChild(link);
+        requestAnimationFrame(() => {
+            if (window.lucide) {
+                window.lucide.createIcons();
+            }
+        });
+        return this;
+    }
+    update(prop, value) {
+        if (!this.container)
+            return;
+        const link = this.container.querySelector(`#${this._id}`);
+        if (!link)
+            return;
+        switch (prop) {
+            case 'href':
+                link.href = value;
+                break;
+            case 'text':
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode)
+                    textNode.textContent = value;
+                break;
+            case 'active':
+                link.classList.toggle('jux-link-active', value);
+                break;
+            case 'disabled':
+                link.classList.toggle('jux-link-disabled', value);
+                break;
+            case 'target':
+                link.target = value;
+                break;
+            default:
+                super.update(prop, value);
+                break;
+        }
+    }
+}
+export function link(id, options = {}) {
+    return new Link(id, options);
+}
+// Convenience helpers
+export function navLink(id, text) {
+    return new Link(id, {
+        href: `/${id}`,
+        text: text || formatIdAsLabel(id)
+    });
+}
+export function externalLink(id, href, text) {
+    return new Link(id, {
+        href,
+        text: text || formatIdAsLabel(id),
+        external: true,
+        icon: 'external-link',
+        iconPosition: 'right'
+    });
+}

package/lib/components/link.ts

@@ -0,0 +1,268 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;
+
+export interface LinkOptions {
+    href?: string;
+    text?: string;
+    icon?: string;
+    iconPosition?: 'left' | 'right';
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    external?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    style?: string;
+    class?: string;
+}
+
+interface LinkState extends BaseState {
+    href: string;
+    text: string;
+    icon: string;
+    iconPosition: 'left' | 'right';
+    target: string;
+    external: boolean;
+    active: boolean;
+}
+
+export class Link extends BaseComponent<LinkState> {
+    constructor(id: string, options: LinkOptions = {}) {
+        super(id, {
+            visible: true,
+            disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            href: options.href ?? `/${id}`,
+            text: options.text ?? formatIdAsLabel(id),
+            icon: options.icon ?? '',
+            iconPosition: options.iconPosition ?? 'left',
+            target: options.target ?? '_self',
+            external: options.external ?? false,
+            active: options.active ?? false
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    href(value: string): this {
+        this.state.href = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) link.href = value;
+        }
+        return this;
+    }
+
+    text(value: string): this {
+        this.state.text = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) {
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode) textNode.textContent = value;
+            }
+        }
+        return this;
+    }
+
+    icon(value: string): this {
+        this.state.icon = value;
+        return this;
+    }
+
+    iconPosition(value: 'left' | 'right'): this {
+        this.state.iconPosition = value;
+        return this;
+    }
+
+    target(value: '_self' | '_blank' | '_parent' | '_top'): this {
+        this.state.target = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) link.target = value;
+        }
+        return this;
+    }
+
+    external(value: boolean = true): this {
+        this.state.external = value;
+        if (value) {
+            this.state.target = '_blank';
+        }
+        return this;
+    }
+
+    active(value: boolean = true): this {
+        this.state.active = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) link.classList.toggle('jux-link-active', value);
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
+        const container = this._setupContainer(targetId);
+
+        const { href, text, icon, iconPosition, target, external, active, disabled, style, class: className } = this.state;
+
+        const link = document.createElement('a');
+        link.id = this._id;
+        link.className = 'jux-link';
+        if (active) link.classList.add('jux-link-active');
+        if (disabled) link.classList.add('jux-link-disabled');
+        if (className) link.className += ` ${className}`;
+        if (style) link.setAttribute('style', style);
+
+        link.href = href;
+        link.target = target;
+
+        // Add rel for external links
+        if (external || target === '_blank') {
+            link.rel = 'noopener noreferrer';
+        }
+
+        // Mark as external link for router to ignore
+        if (external) {
+            link.dataset.router = 'false';
+        }
+
+        // Icon (left position)
+        if (icon && iconPosition === 'left') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-left';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+
+        // Text
+        const textEl = document.createElement('span');
+        textEl.className = 'jux-link-text';
+        textEl.textContent = text;
+        link.appendChild(textEl);
+
+        // Icon (right position)
+        if (icon && iconPosition === 'right') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-right';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+
+        // Wire events
+        this._wireStandardEvents(link);
+
+        // Fire click callback
+        link.addEventListener('click', (e) => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            this._triggerCallback('click', href);
+        });
+
+        // Sync href changes
+        const hrefSync = this._syncBindings.find(b => b.property === 'href');
+        if (hrefSync) {
+            const transform = hrefSync.toComponent || ((v: any) => String(v));
+            hrefSync.stateObj.subscribe((val: any) => {
+                this.href(transform(val));
+            });
+        }
+
+        // Sync text changes
+        const textSync = this._syncBindings.find(b => b.property === 'text');
+        if (textSync) {
+            const transform = textSync.toComponent || ((v: any) => String(v));
+            textSync.stateObj.subscribe((val: any) => {
+                this.text(transform(val));
+            });
+        }
+
+        container.appendChild(link);
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+
+    update(prop: string, value: any): void {
+        if (!this.container) return;
+
+        const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+        if (!link) return;
+
+        switch (prop) {
+            case 'href':
+                link.href = value;
+                break;
+
+            case 'text':
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode) textNode.textContent = value;
+                break;
+
+            case 'active':
+                link.classList.toggle('jux-link-active', value);
+                break;
+
+            case 'disabled':
+                link.classList.toggle('jux-link-disabled', value);
+                break;
+
+            case 'target':
+                link.target = value;
+                break;
+
+            default:
+                super.update(prop, value);
+                break;
+        }
+    }
+}
+
+export function link(id: string, options: LinkOptions = {}): Link {
+    return new Link(id, options);
+}
+
+// Convenience helpers
+export function navLink(id: string, text?: string): Link {
+    return new Link(id, {
+        href: `/${id}`,
+        text: text || formatIdAsLabel(id)
+    });
+}
+
+export function externalLink(id: string, href: string, text?: string): Link {
+    return new Link(id, {
+        href,
+        text: text || formatIdAsLabel(id),
+        external: true,
+        icon: 'external-link',
+        iconPosition: 'right'
+    });
+}

package/lib/styles/link.css

@@ -0,0 +1,158 @@
+/* ═══════════════════════════════════════════════════════════════════
+ * LINK COMPONENT STYLES
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: #3b82f6;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+
+.jux-link:hover {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+.jux-link:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* Active state */
+.jux-link-active {
+  color: #1e40af;
+  font-weight: 600;
+}
+
+/* Disabled state */
+.jux-link-disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.jux-link-disabled:hover {
+  text-decoration: none;
+}
+
+/* Icon positioning */
+.jux-link-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1rem;
+}
+
+.jux-link-icon-left {
+  margin-right: -0.125rem;
+}
+
+.jux-link-icon-right {
+  margin-left: -0.125rem;
+}
+
+/* Text */
+.jux-link-text {
+  line-height: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * LINK VARIANTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Subtle variant */
+.jux-link-subtle {
+  color: #6b7280;
+}
+
+.jux-link-subtle:hover {
+  color: #374151;
+}
+
+/* Muted variant */
+.jux-link-muted {
+  color: #9ca3af;
+  font-weight: 400;
+}
+
+.jux-link-muted:hover {
+  color: #6b7280;
+}
+
+/* Underline variant */
+.jux-link-underline {
+  text-decoration: underline;
+}
+
+.jux-link-underline:hover {
+  text-decoration: none;
+}
+
+/* Button-like variant */
+.jux-link-button {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background-color: #3b82f6;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+.jux-link-button:hover {
+  background-color: #2563eb;
+  text-decoration: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * NAVIGATION SPECIFIC
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Nav link styling */
+.jux-nav-link {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  color: #4b5563;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.jux-nav-link:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+  text-decoration: none;
+}
+
+.jux-nav-link.jux-link-active {
+  background-color: #eff6ff;
+  color: #1e40af;
+}
+
+/* Breadcrumb link */
+.jux-breadcrumb-link {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.jux-breadcrumb-link:hover {
+  color: #111827;
+}
+
+.jux-breadcrumb-link.jux-link-active {
+  color: #111827;
+  font-weight: 600;
+}
+
+/* Footer link */
+.jux-footer-link {
+  color: #9ca3af;
+  font-size: 0.875rem;
+}
+
+.jux-footer-link:hover {
+  color: #d1d5db;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.113",
+  "version": "1.1.115",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",