@incursa/ui-kit 1.6.1 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incursa/ui-kit",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "private": false,
   "description": "Reusable UI kit for data-heavy business applications.",
   "keywords": [
@@ -33,6 +33,9 @@
       "style": "./dist/web-components/style.css",
       "default": "./dist/web-components/index.js"
     },
+    "./icons": {
+      "default": "./dist/icons/index.js"
+    },
     "./web-components/style.css": "./dist/web-components/style.css",
     "./dist/inc-design-language.css": "./dist/inc-design-language.css",
     "./dist/inc-design-language.min.css": "./dist/inc-design-language.min.css",
@@ -52,11 +55,12 @@
   "scripts": {
     "build:css": "sass --load-path=node_modules --quiet-deps --silence-deprecation=import src/inc-design-language.scss dist/inc-design-language.css --style=expanded",
     "build:css:min": "sass --load-path=node_modules --quiet-deps --silence-deprecation=import src/inc-design-language.scss dist/inc-design-language.min.css --style=compressed",
-    "build:js": "node -e \"require('fs').copyFileSync('src/inc-design-language.js', 'dist/inc-design-language.js')\"",
+    "build:icons": "node scripts/build-icons.mjs",
+    "build:js": "esbuild src/inc-design-language.js --bundle --format=iife --platform=browser --outfile=dist/inc-design-language.js",
     "build:wc": "node scripts/build-web-components.mjs",
     "build:mcp:manifests": "node scripts/generate-mcp.mjs",
     "build:mcp": "node scripts/build-mcp.mjs",
-    "build": "npm run build:css && npm run build:css:min && npm run build:js && npm run build:wc && npm run build:mcp",
+    "build": "npm run build:icons && npm run build:css && npm run build:css:min && npm run build:js && npm run build:wc && npm run build:mcp",
     "test:browser:install": "playwright install chromium",
     "test:browser": "playwright test",
     "test:mcp": "node --test tests/mcp/transport.test.mjs tests/mcp/search.test.mjs tests/mcp/installation.test.mjs tests/mcp/markup.test.mjs tests/mcp/freshness.test.mjs",
@@ -70,6 +74,9 @@
     "pack:tarball": "npm pack",
     "package": "npm run build && npm run smoke && npm run pack:tarball"
   },
+  "dependencies": {
+    "lucide": "^1.17.0"
+  },
   "devDependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@playwright/test": "^1.58.2",

package/src/icons/index.js

@@ -0,0 +1,229 @@
+import createLucideElement from "lucide/dist/esm/createElement.mjs";
+import CircleCheck from "lucide/dist/esm/icons/circle-check.mjs";
+import CircleHelp from "lucide/dist/esm/icons/circle-question-mark.mjs";
+import CircleX from "lucide/dist/esm/icons/circle-x.mjs";
+import Download from "lucide/dist/esm/icons/download.mjs";
+import ExternalLink from "lucide/dist/esm/icons/external-link.mjs";
+import FileText from "lucide/dist/esm/icons/file-text.mjs";
+import FolderPlus from "lucide/dist/esm/icons/folder-plus.mjs";
+import Info from "lucide/dist/esm/icons/info.mjs";
+import Lock from "lucide/dist/esm/icons/lock.mjs";
+import Pause from "lucide/dist/esm/icons/pause.mjs";
+import Play from "lucide/dist/esm/icons/play.mjs";
+import RefreshCw from "lucide/dist/esm/icons/refresh-cw.mjs";
+import SearchX from "lucide/dist/esm/icons/search-x.mjs";
+import Settings from "lucide/dist/esm/icons/settings.mjs";
+import ShieldCheck from "lucide/dist/esm/icons/shield-check.mjs";
+import TriangleAlert from "lucide/dist/esm/icons/triangle-alert.mjs";
+import Upload from "lucide/dist/esm/icons/upload.mjs";
+
+const ICON_NODES = Object.freeze({
+    info: Info,
+    help: CircleHelp,
+    success: CircleCheck,
+    warning: TriangleAlert,
+    error: CircleX,
+    upload: Upload,
+    document: FileText,
+    download: Download,
+    settings: Settings,
+    "external-link": ExternalLink,
+    empty: FolderPlus,
+    "no-results": SearchX,
+    loading: RefreshCw,
+    lock: Lock,
+    pause: Pause,
+    play: Play,
+    permission: ShieldCheck,
+});
+
+const ICON_NAMES = Object.freeze(Object.keys(ICON_NODES));
+const DEFAULT_SIZE = 16;
+
+function getNamespace() {
+    if (typeof globalThis === "undefined") {
+        return null;
+    }
+
+    const root = globalThis.IncWebComponents || (globalThis.IncWebComponents = {});
+    const icons = root.icons || (root.icons = {});
+
+    if (!icons.names) {
+        icons.names = ICON_NAMES;
+    }
+
+    if (!icons.defaultRenderer) {
+        icons.defaultRenderer = renderDefaultIcon;
+    }
+
+    if (!icons.render) {
+        icons.render = renderIncIcon;
+    }
+
+    if (!icons.setRenderer) {
+        icons.setRenderer = setIconRenderer;
+    }
+
+    return icons;
+}
+
+function normalizeIconName(name) {
+    return String(name || "")
+        .trim()
+        .toLowerCase()
+        .replace(/[_\s]+/g, "-");
+}
+
+function normalizeSize(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : DEFAULT_SIZE;
+}
+
+function buildIconAttributes(name, options = {}) {
+    const size = normalizeSize(options.size);
+    const className = options.className || "inc-icon";
+    const attrs = {
+        width: size,
+        height: size,
+        "data-inc-icon": name,
+        class: className,
+        focusable: "false",
+    };
+
+    if (options.decorative !== false) {
+        attrs["aria-hidden"] = "true";
+    } else {
+        attrs.role = "img";
+        attrs["aria-label"] = options.label || name;
+    }
+
+    return attrs;
+}
+
+function renderDefaultIcon(name, options = {}) {
+    const normalizedName = normalizeIconName(name);
+    const iconNode = ICON_NODES[normalizedName] || ICON_NODES.info;
+
+    if (typeof document === "undefined") {
+        return "";
+    }
+
+    return createLucideElement(iconNode, buildIconAttributes(normalizedName, options));
+}
+
+function coerceIconResult(result) {
+    if (!result || typeof document === "undefined") {
+        return null;
+    }
+
+    if (result instanceof Node) {
+        return result;
+    }
+
+    if (typeof result === "string") {
+        const template = document.createElement("template");
+        template.innerHTML = result.trim();
+        return template.content.firstElementChild || null;
+    }
+
+    return null;
+}
+
+function getIconRenderer() {
+    const namespace = getNamespace();
+    return typeof namespace?.renderer === "function"
+        ? namespace.renderer
+        : renderDefaultIcon;
+}
+
+function setIconRenderer(renderer) {
+    const namespace = getNamespace();
+    if (!namespace) {
+        return null;
+    }
+
+    if (renderer == null) {
+        delete namespace.renderer;
+        return null;
+    }
+
+    if (typeof renderer !== "function") {
+        throw new TypeError("Inc icon renderer must be a function.");
+    }
+
+    namespace.renderer = renderer;
+    return renderer;
+}
+
+function renderIncIcon(name, options = {}) {
+    const normalizedName = normalizeIconName(name) || "info";
+    const renderer = getIconRenderer();
+    const rendered = renderer(normalizedName, options);
+    const icon = coerceIconResult(rendered) || coerceIconResult(renderDefaultIcon(normalizedName, options));
+
+    if (icon instanceof Element && options.decorative !== false) {
+        icon.setAttribute("aria-hidden", "true");
+        icon.removeAttribute("aria-label");
+        icon.removeAttribute("role");
+    }
+
+    return icon;
+}
+
+function replaceIconContents(container, name, options = {}) {
+    if (!(container instanceof Element)) {
+        return null;
+    }
+
+    container.replaceChildren();
+    const icon = renderIncIcon(name, options);
+    if (icon) {
+        icon.setAttribute("data-inc-generated-icon", "true");
+        icon.setAttribute("data-inc-icon-upgraded", "true");
+        container.append(icon);
+    }
+
+    return icon;
+}
+
+function upgradeIconPlaceholders(root = typeof document !== "undefined" ? document : null) {
+    if (!root || typeof root.querySelectorAll !== "function") {
+        return [];
+    }
+
+    const upgraded = [];
+    root.querySelectorAll("[data-inc-icon]").forEach((node) => {
+        if (!(node instanceof Element)) {
+            return;
+        }
+
+        const name = node.getAttribute("data-inc-icon");
+        if (!name || node.hasAttribute("data-inc-icon-upgraded") || node.hasAttribute("data-inc-generated-icon")) {
+            return;
+        }
+
+        replaceIconContents(node, name, {
+            className: node.getAttribute("data-inc-icon-class") || "inc-icon",
+            decorative: node.getAttribute("aria-hidden") !== "false",
+            label: node.getAttribute("aria-label") || undefined,
+            size: node.getAttribute("data-inc-icon-size") || undefined,
+        });
+        node.setAttribute("data-inc-icon-upgraded", "true");
+        upgraded.push(node);
+    });
+
+    return upgraded;
+}
+
+getNamespace();
+
+export {
+    ICON_NAMES as incIconNames,
+    getIconRenderer,
+    normalizeIconName,
+    renderDefaultIcon,
+    renderIncIcon,
+    replaceIconContents,
+    setIconRenderer,
+    upgradeIconPlaceholders,
+};

package/src/icons/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/src/inc-design-language.js

@@ -1,3 +1,8 @@
+import {
+    replaceIconContents,
+    upgradeIconPlaceholders,
+} from "./icons/index.js";
+
 (function () {
     "use strict";
 
@@ -12,8 +17,15 @@
         themeLabel: "[data-inc-theme-label]",
         themeSwitcher: "[data-inc-theme-switcher], details.inc-theme-switcher",
         nativeDialogOpen: "[data-inc-native-dialog-open]",
+        icon: "[data-inc-icon]",
         autoRefresh: "[data-inc-auto-refresh]",
         autoRefreshToggle: '[data-inc-action="auto-refresh-toggle"]',
+        fileExample: "[data-inc-file-example]",
+        fileDropzone: "[data-inc-file-dropzone]",
+        fileInput: "[data-inc-file-input]",
+        fileBrowse: "[data-inc-file-browse]",
+        fileList: "[data-inc-file-list]",
+        fileRemove: '[data-inc-action="file-remove"]',
         modalToggle: '[data-inc-toggle="modal"]',
         modalDismiss: '[data-inc-dismiss="modal"]',
         offcanvasToggle: '[data-inc-toggle="offcanvas"]',
@@ -824,6 +836,298 @@
         return parsed;
     }
 
+    function formatFileExampleSize(bytes) {
+        if (!Number.isFinite(bytes) || bytes <= 0) {
+            return "0 B";
+        }
+
+        if (bytes < 1024) {
+            return `${bytes} B`;
+        }
+
+        const units = ["KB", "MB", "GB", "TB"];
+        let value = bytes / 1024;
+        let unitIndex = 0;
+
+        while (value >= 1024 && unitIndex < (units.length - 1)) {
+            value /= 1024;
+            unitIndex += 1;
+        }
+
+        const precision = value >= 10 ? 0 : 1;
+        return `${value.toFixed(precision)} ${units[unitIndex]}`;
+    }
+
+    function getFileExampleTypeLabel(file) {
+        if (!(file instanceof File)) {
+            return "File";
+        }
+
+        const extensionMatch = /\.([a-z0-9]+)$/i.exec(file.name || "");
+        if (extensionMatch?.[1]) {
+            return extensionMatch[1].toUpperCase();
+        }
+
+        if (typeof file.type === "string" && file.type.includes("/")) {
+            return file.type.split("/").at(-1)?.toUpperCase() || "File";
+        }
+
+        return "File";
+    }
+
+    function createFileExampleRow(file) {
+        const row = document.createElement("div");
+        const meta = document.createElement("div");
+        const name = document.createElement("p");
+        const detail = document.createElement("p");
+        const badge = document.createElement("span");
+        const actions = document.createElement("div");
+        const preview = document.createElement("a");
+        const remove = document.createElement("button");
+        const objectUrl = URL.createObjectURL(file);
+
+        row.className = "inc-file-row";
+        row._incFileExampleObjectUrl = objectUrl;
+
+        meta.className = "inc-file-row__meta";
+        name.className = "inc-file-row__name";
+        name.textContent = file.name || "untitled-file";
+        detail.className = "inc-file-row__detail";
+        detail.textContent = `${getFileExampleTypeLabel(file)} • ${formatFileExampleSize(file.size)} • selected just now`;
+        meta.append(name, detail);
+
+        badge.className = "inc-badge inc-badge--secondary inc-badge--pill";
+        badge.textContent = "Ready";
+
+        actions.className = "inc-file-row__actions";
+
+        preview.className = "inc-btn inc-btn--outline-secondary inc-btn--sm";
+        preview.href = objectUrl;
+        preview.target = "_blank";
+        preview.rel = "noreferrer";
+        preview.textContent = "Preview";
+
+        remove.type = "button";
+        remove.className = "inc-btn inc-btn--secondary inc-btn--sm";
+        remove.textContent = "Remove";
+        remove.setAttribute("data-inc-action", "file-remove");
+        remove.setAttribute("aria-label", `Remove ${file.name}`);
+
+        actions.append(preview, remove);
+        row.append(meta, badge, actions);
+        return row;
+    }
+
+    function revokeFileExampleRow(row) {
+        if (!(row instanceof HTMLElement)) {
+            return;
+        }
+
+        if (typeof row._incFileExampleObjectUrl === "string" && row._incFileExampleObjectUrl) {
+            URL.revokeObjectURL(row._incFileExampleObjectUrl);
+            row._incFileExampleObjectUrl = "";
+        }
+    }
+
+    function updateFileExampleEmptyState(controller) {
+        const { list } = controller.parts;
+        if (!(list instanceof HTMLElement)) {
+            return;
+        }
+
+        const rows = list.querySelectorAll(".inc-file-row");
+        let empty = list.querySelector("[data-inc-file-empty]");
+
+        if (rows.length > 0) {
+            if (empty instanceof HTMLElement) {
+                empty.hidden = true;
+            }
+            return;
+        }
+
+        if (!(empty instanceof HTMLElement)) {
+            empty = document.createElement("p");
+            empty.className = "inc-text inc-text--small inc-text--muted";
+            empty.setAttribute("data-inc-file-empty", "");
+            empty.textContent = controller.emptyText;
+            list.append(empty);
+        }
+
+        empty.hidden = false;
+    }
+
+    function appendFilesToExample(controller, files) {
+        const { list } = controller.parts;
+        if (!(list instanceof HTMLElement)) {
+            return;
+        }
+
+        const fileItems = Array.from(files || []).filter((file) => file instanceof File);
+        if (!fileItems.length) {
+            return;
+        }
+
+        fileItems.forEach((file) => {
+            list.append(createFileExampleRow(file));
+        });
+
+        updateFileExampleEmptyState(controller);
+    }
+
+    function dataTransferIncludesFiles(dataTransfer) {
+        if (!dataTransfer) {
+            return false;
+        }
+
+        if (dataTransfer.files?.length) {
+            return true;
+        }
+
+        return Array.from(dataTransfer.types || []).includes("Files");
+    }
+
+    function setFileDropzoneActiveState(controller, isActive) {
+        const { dropzone } = controller.parts;
+        if (!(dropzone instanceof HTMLElement)) {
+            return;
+        }
+
+        dropzone.classList.toggle("is-drag-over", Boolean(isActive));
+    }
+
+    function openFileExamplePicker(controller) {
+        const { input } = controller.parts;
+        if (!(input instanceof HTMLInputElement)) {
+            return;
+        }
+
+        input.click();
+    }
+
+    function initializeFileExamples() {
+        document.querySelectorAll(selectors.fileExample).forEach((root) => {
+            if (!(root instanceof HTMLElement) || root._incFileExampleInitialized) {
+                return;
+            }
+
+            const controller = {
+                root,
+                parts: {
+                    dropzone: root.querySelector(selectors.fileDropzone),
+                    input: root.querySelector(selectors.fileInput),
+                    browse: root.querySelector(selectors.fileBrowse),
+                    list: root.querySelector(selectors.fileList),
+                },
+                emptyText: root.getAttribute("data-inc-file-empty-text") || "No files selected yet.",
+                dragDepth: 0,
+            };
+
+            const { dropzone, input, browse, list } = controller.parts;
+            if (!(dropzone instanceof HTMLElement) || !(input instanceof HTMLInputElement) || !(list instanceof HTMLElement)) {
+                return;
+            }
+
+            root._incFileExampleInitialized = true;
+            root._incFileExampleController = controller;
+
+            dropzone.setAttribute("tabindex", dropzone.getAttribute("tabindex") || "0");
+            dropzone.setAttribute("role", dropzone.getAttribute("role") || "button");
+            dropzone.setAttribute("aria-label", dropzone.getAttribute("aria-label") || "Drop files here or browse for files");
+
+            const browseAction = (event) => {
+                event.preventDefault();
+                openFileExamplePicker(controller);
+            };
+
+            if (browse instanceof HTMLElement) {
+                browse.addEventListener("click", browseAction);
+            }
+
+            dropzone.addEventListener("click", (event) => {
+                if (event.target instanceof Element && event.target.closest("a, button, input, label")) {
+                    return;
+                }
+
+                openFileExamplePicker(controller);
+            });
+
+            dropzone.addEventListener("keydown", (event) => {
+                if (event.key !== "Enter" && event.key !== " ") {
+                    return;
+                }
+
+                event.preventDefault();
+                openFileExamplePicker(controller);
+            });
+
+            dropzone.addEventListener("dragenter", (event) => {
+                if (!dataTransferIncludesFiles(event.dataTransfer)) {
+                    return;
+                }
+
+                event.preventDefault();
+                controller.dragDepth += 1;
+                setFileDropzoneActiveState(controller, true);
+            });
+
+            dropzone.addEventListener("dragover", (event) => {
+                if (!dataTransferIncludesFiles(event.dataTransfer)) {
+                    return;
+                }
+
+                event.preventDefault();
+                if (event.dataTransfer) {
+                    event.dataTransfer.dropEffect = "copy";
+                }
+                setFileDropzoneActiveState(controller, true);
+            });
+
+            dropzone.addEventListener("dragleave", (event) => {
+                if (!dataTransferIncludesFiles(event.dataTransfer)) {
+                    return;
+                }
+
+                event.preventDefault();
+                controller.dragDepth = Math.max(0, controller.dragDepth - 1);
+
+                if (controller.dragDepth === 0 || !dropzone.contains(event.relatedTarget)) {
+                    setFileDropzoneActiveState(controller, false);
+                }
+            });
+
+            dropzone.addEventListener("drop", (event) => {
+                if (!dataTransferIncludesFiles(event.dataTransfer)) {
+                    return;
+                }
+
+                event.preventDefault();
+                controller.dragDepth = 0;
+                setFileDropzoneActiveState(controller, false);
+                appendFilesToExample(controller, event.dataTransfer?.files);
+            });
+
+            input.addEventListener("change", () => {
+                appendFilesToExample(controller, input.files);
+                input.value = "";
+            });
+
+            list.addEventListener("click", (event) => {
+                const removeButton = event.target.closest(selectors.fileRemove);
+                if (!removeButton) {
+                    return;
+                }
+
+                event.preventDefault();
+                const row = removeButton.closest(".inc-file-row");
+                revokeFileExampleRow(row);
+                row?.remove();
+                updateFileExampleEmptyState(controller);
+            });
+
+            updateFileExampleEmptyState(controller);
+        });
+    }
+
     function formatAutoRefreshRemaining(totalSeconds) {
         if (totalSeconds < 60) {
             return `${totalSeconds}s`;
@@ -835,13 +1139,25 @@
     }
 
     function getAutoRefreshParts(root) {
+        const toggle = root.querySelector(".inc-auto-refresh__toggle");
+
+        if (toggle instanceof HTMLElement) {
+            if (!toggle.querySelector(".inc-auto-refresh__toggle-icon")) {
+                const icon = document.createElement("span");
+                icon.className = "inc-auto-refresh__toggle-icon";
+                icon.setAttribute("aria-hidden", "true");
+                toggle.prepend(icon);
+            }
+        }
+
         return {
             countdown: root.querySelector(".inc-auto-refresh__countdown"),
             label: root.querySelector(".inc-auto-refresh__label"),
             value: root.querySelector(".inc-auto-refresh__value"),
             status: root.querySelector(".inc-auto-refresh__status"),
             statusText: root.querySelector(".inc-auto-refresh__status-text"),
-            toggle: root.querySelector(".inc-auto-refresh__toggle"),
+            toggle,
+            toggleIcon: root.querySelector(".inc-auto-refresh__toggle-icon"),
             toggleText: root.querySelector(".inc-auto-refresh__toggle-text"),
         };
     }
@@ -861,6 +1177,14 @@
         if (parts.toggleText) {
             parts.toggleText.textContent = actionLabel;
         }
+
+        if (parts.toggleIcon instanceof HTMLElement) {
+            replaceIconContents(parts.toggleIcon, isPaused ? "play" : "pause", {
+                className: "inc-icon",
+                decorative: true,
+                size: 16,
+            });
+        }
     }
 
     function renderAutoRefreshCountdown(controller, remainingSeconds) {
@@ -1524,6 +1848,8 @@
         initializeMenus();
         initializeCollapses();
         initializeTabs();
+        upgradeIconPlaceholders(document);
+        initializeFileExamples();
         initializeAutoRefresh();
         attachEventHandlers();
     }