indas-ui 0.0.1 → 0.1.0

package/dist/lib/security/audit-logger.js

@@ -0,0 +1,173 @@
+'use client';
+// Audit logging for security events
+// Uses C# backend API for persistent storage in MSSQL database
+class AuditLogger {
+    constructor() {
+        this.apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || '';
+    }
+    /**
+     * Log a security event to backend database
+     */
+    async log(event, options) {
+        try {
+            // Console log in development
+            if (process.env.NODE_ENV === 'development') {
+                const emoji = this.getEventEmoji(event.event);
+            }
+            // Send to backend API — include session headers so backend accepts the request
+            // At login time UserID/CompanyID come from the event itself (no session yet)
+            const companyId = event.companyId || '0';
+            const userId = event.userId || '0';
+            const headers = {
+                'Content-Type': 'application/json',
+                'CompanyID': companyId,
+                'UserID': userId,
+                'ProductionUnitID': '0',
+                'FYear': new Date().getFullYear().toString(),
+            };
+            // Add Basic Auth if provided (needed for pre-session auth events)
+            if (options?.basicAuth) {
+                const encoded = Buffer.from(`${options.basicAuth.username}:${options.basicAuth.password}`).toString('base64');
+                headers['Authorization'] = `Basic ${encoded}`;
+            }
+            const response = await fetch(`${this.apiBaseUrl}/api/auditlog`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({
+                    Event: event.event,
+                    Username: event.username,
+                    UserID: userId,
+                    CompanyID: companyId,
+                    IPAddress: event.ipAddress,
+                    UserAgent: event.userAgent,
+                    Success: event.success,
+                    ErrorMessage: event.errorMessage,
+                    Metadata: {
+                        ...event.metadata,
+                        ...(event.loginTime && { loginTime: event.loginTime }),
+                        ...(event.sessionDurationMinutes !== undefined && { sessionDurationMinutes: event.sessionDurationMinutes }),
+                        ...(event.attemptCount !== undefined && { attemptCount: event.attemptCount }),
+                        ...(event.failureReason && { failureReason: event.failureReason }),
+                    },
+                    Module: 'AUTH',
+                    Action: event.event,
+                    DocumentName: 'Session'
+                })
+            });
+            if (!response.ok) {
+                console.error('Failed to log audit event to backend:', await response.text());
+            }
+        }
+        catch (error) {
+            // Silent fail - don't break authentication flow if audit logging fails
+            console.error('Audit logging error:', error);
+        }
+    }
+    /**
+     * Get recent logs from backend
+     */
+    async getRecentLogs(limit = 100, options) {
+        try {
+            const params = new URLSearchParams({
+                limit: limit.toString()
+            });
+            if (options?.eventType)
+                params.append('eventType', options.eventType);
+            if (options?.username)
+                params.append('username', options.username);
+            if (options?.companyId)
+                params.append('companyId', options.companyId);
+            const response = await fetch(`${this.apiBaseUrl}/api/auditlog/recent?${params}`);
+            if (response.ok) {
+                const result = await response.json();
+                return result.data || [];
+            }
+            return [];
+        }
+        catch (error) {
+            console.error('Failed to fetch audit logs:', error);
+            return [];
+        }
+    }
+    /**
+     * Get logs for a specific user
+     */
+    async getUserLogs(username, limit = 50) {
+        return this.getRecentLogs(limit, { username });
+    }
+    /**
+     * Get logs for a specific event type
+     */
+    async getEventLogs(event, limit = 100) {
+        return this.getRecentLogs(limit, { eventType: event });
+    }
+    /**
+     * Get failed login attempts for a user
+     */
+    async getFailedLoginAttempts(username, since) {
+        const logs = await this.getUserLogs(username, 100);
+        const sinceTime = since ? since.getTime() : Date.now() - 24 * 60 * 60 * 1000;
+        return logs.filter(log => log.event === 'LOGIN_FAILURE' &&
+            log.timestamp && new Date(log.timestamp).getTime() >= sinceTime);
+    }
+    /**
+     * Get emoji for event type
+     */
+    getEventEmoji(event) {
+        const emojiMap = {
+            'LOGIN_SUCCESS': '✅',
+            'LOGIN_FAILURE': '❌',
+            'LOGOUT': '👋',
+            'SESSION_EXPIRED': '⏰',
+            'RATE_LIMIT_EXCEEDED': '🚫',
+            'UNAUTHORIZED_ACCESS': '⚠️'
+        };
+        return emojiMap[event] || '📝';
+    }
+    /**
+     * Get statistics from backend
+     */
+    async getStats(companyId, startDate) {
+        try {
+            const params = new URLSearchParams();
+            if (companyId)
+                params.append('companyId', companyId);
+            if (startDate)
+                params.append('startDate', startDate.toISOString());
+            const response = await fetch(`${this.apiBaseUrl}/api/auditlog/stats?${params}`);
+            if (response.ok) {
+                const result = await response.json();
+                return result.data;
+            }
+            return {
+                totalLogs: 0,
+                loginSuccesses: 0,
+                loginFailures: 0,
+                logouts: 0,
+                rateLimitExceeded: 0,
+                unauthorizedAccess: 0,
+                uniqueUsers: 0,
+                uniqueIPAddresses: 0
+            };
+        }
+        catch (error) {
+            console.error('Failed to fetch audit stats:', error);
+            return {
+                totalLogs: 0,
+                loginSuccesses: 0,
+                loginFailures: 0,
+                logouts: 0,
+                rateLimitExceeded: 0,
+                unauthorizedAccess: 0,
+                uniqueUsers: 0,
+                uniqueIPAddresses: 0
+            };
+        }
+    }
+}
+// Export singleton instance
+export const auditLogger = new AuditLogger();
+// Helper function to get user agent from request
+export function getUserAgent(request) {
+    return request.headers.get('user-agent') || 'unknown';
+}

package/dist/lib/security/rate-limiter.d.ts

@@ -0,0 +1,28 @@
+declare class RateLimiter {
+    private apiBaseUrl;
+    constructor();
+    /**
+     * Check if a request should be rate limited using backend API
+     * @param identifier - Usually IP address or username
+     * @param maxAttempts - Maximum attempts allowed in the window
+     * @param windowMs - Time window in milliseconds
+     * @returns Object with allowed status and remaining attempts
+     */
+    check(identifier: string, maxAttempts?: number, windowMs?: number, // 15 minutes default
+    identifierType?: string): Promise<{
+        allowed: boolean;
+        remaining: number;
+        resetIn: number;
+    }>;
+    /**
+     * Reset rate limit for an identifier (e.g., after successful login)
+     */
+    reset(identifier: string, identifierType?: string): Promise<void>;
+    /**
+     * Get current stats for an identifier (for debugging)
+     */
+    getStats(identifier: string, identifierType?: string): Promise<any>;
+}
+export declare const rateLimiter: RateLimiter;
+export declare function getClientIP(request: Request): string;
+export {};

package/dist/lib/security/rate-limiter.js

@@ -0,0 +1,118 @@
+'use client';
+// Production-grade rate limiter using C# backend API with MSSQL database
+// Distributed and persisted across server restarts
+class RateLimiter {
+    constructor() {
+        this.apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || '';
+    }
+    /**
+     * Check if a request should be rate limited using backend API
+     * @param identifier - Usually IP address or username
+     * @param maxAttempts - Maximum attempts allowed in the window
+     * @param windowMs - Time window in milliseconds
+     * @returns Object with allowed status and remaining attempts
+     */
+    async check(identifier, maxAttempts = 5, windowMs = 15 * 60 * 1000, // 15 minutes default
+    identifierType = 'USERNAME') {
+        try {
+            const windowMinutes = Math.floor(windowMs / 60000);
+            const blockMinutes = windowMinutes; // Block for same duration as window
+            const response = await fetch(`${this.apiBaseUrl}/api/security/ratelimit/check`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    Identifier: identifier,
+                    IdentifierType: identifierType,
+                    MaxAttempts: maxAttempts,
+                    WindowMinutes: windowMinutes,
+                    BlockMinutes: blockMinutes
+                })
+            });
+            if (response.ok) {
+                const result = await response.json();
+                return {
+                    allowed: result.allowed,
+                    remaining: result.remaining,
+                    resetIn: result.resetIn * 1000 // Convert seconds to milliseconds
+                };
+            }
+            // If API fails, allow the request (fail open)
+            console.error('Rate limit check failed, allowing request');
+            return {
+                allowed: true,
+                remaining: maxAttempts,
+                resetIn: windowMs
+            };
+        }
+        catch (error) {
+            // If API fails, allow the request (fail open)
+            console.error('Rate limit check error:', error);
+            return {
+                allowed: true,
+                remaining: maxAttempts,
+                resetIn: windowMs
+            };
+        }
+    }
+    /**
+     * Reset rate limit for an identifier (e.g., after successful login)
+     */
+    async reset(identifier, identifierType = 'USERNAME') {
+        try {
+            await fetch(`${this.apiBaseUrl}/api/security/ratelimit/reset`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    Identifier: identifier,
+                    IdentifierType: identifierType
+                })
+            });
+        }
+        catch (error) {
+            console.error('Rate limit reset error:', error);
+        }
+    }
+    /**
+     * Get current stats for an identifier (for debugging)
+     */
+    async getStats(identifier, identifierType = 'USERNAME') {
+        try {
+            const response = await fetch(`${this.apiBaseUrl}/api/security/ratelimit/status?identifier=${encodeURIComponent(identifier)}&identifierType=${identifierType}`);
+            if (response.ok) {
+                const result = await response.json();
+                return result.data;
+            }
+            return null;
+        }
+        catch (error) {
+            console.error('Failed to get rate limit stats:', error);
+            return null;
+        }
+    }
+}
+// Export singleton instance
+export const rateLimiter = new RateLimiter();
+// Helper function to get client IP from request
+export function getClientIP(request) {
+    // Try various headers in order of preference
+    const headers = [
+        'x-real-ip',
+        'x-forwarded-for',
+        'cf-connecting-ip', // Cloudflare
+        'true-client-ip', // Cloudflare Enterprise
+        'x-client-ip'
+    ];
+    for (const header of headers) {
+        const value = request.headers.get(header);
+        if (value) {
+            // x-forwarded-for can contain multiple IPs, take the first one
+            return value.split(',')[0].trim();
+        }
+    }
+    // Fallback to 'unknown' if no IP found
+    return 'unknown';
+}

package/dist/lib/server-url.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Gets the current server URL dynamically using request headers
+ * No hardcoded values - truly production ready
+ */
+export declare function getServerBaseURL(): Promise<string>;
+/**
+ * Gets the current request URL (full path)
+ */
+export declare function getCurrentURL(): Promise<string>;
+/**
+ * Maps a relative path to absolute URL (like Server.MapPath)
+ */
+export declare function mapPath(relativePath: string): Promise<string>;
+/**
+ * Gets the base URL for client-side usage (window.location based)
+ * Falls back to NEXTAUTH_URL for SSR
+ */
+export declare function getClientBaseURL(): string;

package/dist/lib/server-url.js

@@ -0,0 +1,70 @@
+// Server-side URL utilities (using dynamic host detection)
+import { headers } from 'next/headers';
+/**
+ * Gets the current server URL dynamically using request headers
+ * No hardcoded values - truly production ready
+ */
+export async function getServerBaseURL() {
+    try {
+        // Get headers to determine current URL dynamically
+        const headersList = await headers();
+        const host = headersList.get('host');
+        // Detect protocol dynamically
+        const forwardedProto = headersList.get('x-forwarded-proto');
+        const forwardedSsl = headersList.get('x-forwarded-ssl');
+        const isSecure = forwardedProto === 'https' || forwardedSsl === 'on';
+        const protocol = isSecure ? 'https' : 'http';
+        if (host) {
+            const baseUrl = `${protocol}://${host}`;
+            return baseUrl;
+        }
+        throw new Error('No host header found in request');
+    }
+    catch (error) {
+        console.error('Error detecting server URL:', error);
+        throw error; // Don't return fallback, let caller handle
+    }
+}
+/**
+ * Gets the current request URL (full path)
+ */
+export async function getCurrentURL() {
+    try {
+        const headersList = await headers();
+        const host = headersList.get('host');
+        const protocol = headersList.get('x-forwarded-proto') ||
+            (headersList.get('x-forwarded-ssl') === 'on' ? 'https' : 'http');
+        const pathname = headersList.get('x-pathname') || '/';
+        if (host) {
+            return `${protocol}://${host}${pathname}`;
+        }
+        // Fallback to NEXTAUTH_URL environment variable
+        return `${process.env.NEXTAUTH_URL}/`;
+    }
+    catch (error) {
+        console.error('Error getting current URL:', error);
+        // Fallback to NEXTAUTH_URL environment variable
+        return `${process.env.NEXTAUTH_URL}/`;
+    }
+}
+/**
+ * Maps a relative path to absolute URL (like Server.MapPath)
+ */
+export async function mapPath(relativePath) {
+    const baseUrl = await getServerBaseURL();
+    // Ensure path starts with /
+    const path = relativePath.startsWith('/') ? relativePath : `/${relativePath}`;
+    return `${baseUrl}${path}`;
+}
+/**
+ * Gets the base URL for client-side usage (window.location based)
+ * Falls back to NEXTAUTH_URL for SSR
+ */
+export function getClientBaseURL() {
+    // Client-side: use window.location
+    if (typeof window !== 'undefined') {
+        return `${window.location.protocol}//${window.location.host}`;
+    }
+    // Server-side: use environment variable
+    return process.env.NEXTAUTH_URL;
+}

package/dist/lib/svg-utils.d.ts

@@ -0,0 +1,62 @@
+/**
+ * SVG Drawing Utilities
+ * Reusable functions for drawing SVG elements like dimension arrows, text, shapes, etc.
+ */
+interface DrawTextParams {
+    svg: SVGSVGElement;
+    x: number;
+    y: number;
+    text: string;
+    fontSize: number;
+    color: string;
+    fontWeight?: string;
+    textAnchor?: 'start' | 'middle' | 'end';
+    dominantBaseline?: 'auto' | 'middle' | 'hanging' | 'alphabetic';
+}
+export declare function drawText({ svg, x, y, text, fontSize, color, fontWeight, textAnchor, dominantBaseline }: DrawTextParams): void;
+interface DrawRectangleParams {
+    svg: SVGSVGElement;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderColor: string;
+    borderWidth: number;
+    fillColor: string;
+    fillOpacity?: number;
+    rx?: number;
+}
+export declare function drawRectangle({ svg, x, y, width, height, borderColor, borderWidth, fillColor, fillOpacity, rx }: DrawRectangleParams): void;
+interface DrawLineParams {
+    svg: SVGSVGElement;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    color: string;
+    width: number;
+    dashArray?: string;
+    opacity?: number;
+}
+export declare function drawLine({ svg, x1, y1, x2, y2, color, width, dashArray, opacity }: DrawLineParams): void;
+interface DrawDimensionArrowParams {
+    svg: SVGSVGElement;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    label: string;
+    isVertical?: boolean;
+    offset?: number;
+}
+export declare function drawDimensionArrow({ svg, x1, y1, x2, y2, label, isVertical, offset }: DrawDimensionArrowParams): void;
+interface DrawPolygonParams {
+    svg: SVGSVGElement;
+    points: string;
+    fillColor: string;
+    borderColor?: string;
+    borderWidth?: number;
+    fillOpacity?: number;
+}
+export declare function drawPolygon({ svg, points, fillColor, borderColor, borderWidth, fillOpacity }: DrawPolygonParams): void;
+export {};

package/dist/lib/svg-utils.js

@@ -0,0 +1,206 @@
+'use client';
+/**
+ * SVG Drawing Utilities
+ * Reusable functions for drawing SVG elements like dimension arrows, text, shapes, etc.
+ */
+export function drawText({ svg, x, y, text, fontSize, color, fontWeight = 'normal', textAnchor = 'middle', dominantBaseline = 'middle' }) {
+    const textEl = document.createElementNS("http://www.w3.org/2000/svg", 'text');
+    textEl.setAttribute('x', x.toString());
+    textEl.setAttribute('y', y.toString());
+    textEl.setAttribute('font-size', fontSize.toString());
+    textEl.setAttribute('fill', color);
+    textEl.setAttribute('font-weight', fontWeight);
+    textEl.setAttribute('text-anchor', textAnchor);
+    textEl.setAttribute('dominant-baseline', dominantBaseline);
+    textEl.textContent = text;
+    svg.appendChild(textEl);
+}
+export function drawRectangle({ svg, x, y, width, height, borderColor, borderWidth, fillColor, fillOpacity = 1, rx = 0 }) {
+    if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height))
+        return;
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+    rect.setAttributeNS(null, "x", x.toString());
+    rect.setAttributeNS(null, "y", y.toString());
+    rect.setAttributeNS(null, "width", width.toString());
+    rect.setAttributeNS(null, "height", height.toString());
+    rect.setAttributeNS(null, "stroke", borderColor);
+    rect.setAttributeNS(null, "stroke-width", borderWidth.toString());
+    rect.setAttributeNS(null, "fill", fillColor);
+    rect.setAttributeNS(null, "fill-opacity", fillOpacity.toString());
+    if (rx > 0) {
+        rect.setAttributeNS(null, "rx", rx.toString());
+    }
+    svg.appendChild(rect);
+}
+export function drawLine({ svg, x1, y1, x2, y2, color, width, dashArray, opacity = 1 }) {
+    if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2))
+        return;
+    const line = document.createElementNS("http://www.w3.org/2000/svg", 'line');
+    line.setAttribute("x1", x1.toString());
+    line.setAttribute("y1", y1.toString());
+    line.setAttribute("x2", x2.toString());
+    line.setAttribute("y2", y2.toString());
+    line.setAttribute("stroke", color);
+    line.setAttribute("stroke-width", width.toString());
+    if (dashArray) {
+        line.setAttribute("stroke-dasharray", dashArray);
+    }
+    if (opacity < 1) {
+        line.setAttribute("opacity", opacity.toString());
+    }
+    svg.appendChild(line);
+}
+export function drawDimensionArrow({ svg, x1, y1, x2, y2, label, isVertical = false, offset = 10 }) {
+    if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2))
+        return;
+    // Wrap all dimension elements in a group so exports can strip them
+    const childCountBefore = svg.childElementCount;
+    const lineColor = "#1e293b"; // Slate-800 - professional dark
+    const arrowColor = "#0f172a"; // Slate-900 - maximum contrast
+    const lineWidth = 1.5;
+    // Main dimension line
+    drawLine({
+        svg,
+        x1,
+        y1,
+        x2,
+        y2,
+        color: lineColor,
+        width: lineWidth
+    });
+    // Arrowheads - sleek triangular design
+    const arrowSize = 7;
+    if (isVertical) {
+        // Vertical arrow - pointing up at start
+        const arrow1 = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
+        arrow1.setAttribute("points", `${x1},${y1} ${x1 - arrowSize / 2},${y1 + arrowSize} ${x1 + arrowSize / 2},${y1 + arrowSize}`);
+        arrow1.setAttribute("fill", arrowColor);
+        arrow1.setAttribute("stroke", "none");
+        svg.appendChild(arrow1);
+        // Arrowhead at end - pointing down
+        const arrow2 = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
+        arrow2.setAttribute("points", `${x2},${y2} ${x2 - arrowSize / 2},${y2 - arrowSize} ${x2 + arrowSize / 2},${y2 - arrowSize}`);
+        arrow2.setAttribute("fill", arrowColor);
+        arrow2.setAttribute("stroke", "none");
+        svg.appendChild(arrow2);
+    }
+    else {
+        // Horizontal arrow - pointing left at start
+        const arrow1 = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
+        arrow1.setAttribute("points", `${x1},${y1} ${x1 + arrowSize},${y1 - arrowSize / 2} ${x1 + arrowSize},${y1 + arrowSize / 2}`);
+        arrow1.setAttribute("fill", arrowColor);
+        arrow1.setAttribute("stroke", "none");
+        svg.appendChild(arrow1);
+        // Arrowhead at end - pointing right
+        const arrow2 = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
+        arrow2.setAttribute("points", `${x2},${y2} ${x2 - arrowSize},${y2 - arrowSize / 2} ${x2 - arrowSize},${y2 + arrowSize / 2}`);
+        arrow2.setAttribute("fill", arrowColor);
+        arrow2.setAttribute("stroke", "none");
+        svg.appendChild(arrow2);
+    }
+    // Label with professional styling
+    const labelX = (x1 + x2) / 2;
+    const labelY = (y1 + y2) / 2;
+    // Compact label sizing
+    const padding = 5;
+    const fontSize = 12;
+    const textWidth = label.length * 7;
+    const textHeight = fontSize + 2;
+    if (isVertical) {
+        // For vertical arrows, rotate the text 90 degrees counterclockwise
+        // Background rectangle (rotated) - subtle shadow effect
+        const shadow = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+        shadow.setAttribute("x", (-(textWidth / 2 + padding) + 1).toString());
+        shadow.setAttribute("y", (-(textHeight / 2 + padding) + 1).toString());
+        shadow.setAttribute("width", (textWidth + padding * 2).toString());
+        shadow.setAttribute("height", (textHeight + padding * 2).toString());
+        shadow.setAttribute("fill", "#000000");
+        shadow.setAttribute("opacity", "0.1");
+        shadow.setAttribute("rx", "3");
+        shadow.setAttribute("transform", `translate(${labelX}, ${labelY}) rotate(-90)`);
+        svg.appendChild(shadow);
+        // Background rectangle (rotated)
+        const rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+        rect.setAttribute("x", (-(textWidth / 2 + padding)).toString());
+        rect.setAttribute("y", (-(textHeight / 2 + padding)).toString());
+        rect.setAttribute("width", (textWidth + padding * 2).toString());
+        rect.setAttribute("height", (textHeight + padding * 2).toString());
+        rect.setAttribute("fill", "white");
+        rect.setAttribute("stroke", "#94a3b8"); // Slate-400 - defined border
+        rect.setAttribute("stroke-width", "1");
+        rect.setAttribute("rx", "3");
+        rect.setAttribute("transform", `translate(${labelX}, ${labelY}) rotate(-90)`);
+        svg.appendChild(rect);
+        // Rotated text
+        const textEl = document.createElementNS("http://www.w3.org/2000/svg", 'text');
+        textEl.setAttribute('x', "0");
+        textEl.setAttribute('y', "0");
+        textEl.setAttribute('font-size', fontSize.toString());
+        textEl.setAttribute('fill', arrowColor);
+        textEl.setAttribute('font-weight', "600");
+        textEl.setAttribute('text-anchor', 'middle');
+        textEl.setAttribute('dominant-baseline', 'middle');
+        textEl.setAttribute('transform', `translate(${labelX}, ${labelY}) rotate(-90)`);
+        textEl.textContent = label;
+        svg.appendChild(textEl);
+    }
+    else {
+        // Horizontal arrow - subtle shadow
+        drawRectangle({
+            svg,
+            x: labelX - textWidth / 2 - padding + 1,
+            y: labelY - textHeight / 2 - padding + 1,
+            width: textWidth + padding * 2,
+            height: textHeight + padding * 2,
+            borderColor: "transparent",
+            borderWidth: 0,
+            fillColor: "#000000",
+            fillOpacity: 0.1,
+            rx: 3
+        });
+        // Horizontal arrow - label background
+        drawRectangle({
+            svg,
+            x: labelX - textWidth / 2 - padding,
+            y: labelY - textHeight / 2 - padding,
+            width: textWidth + padding * 2,
+            height: textHeight + padding * 2,
+            borderColor: "#94a3b8", // Slate-400 - defined border
+            borderWidth: 1,
+            fillColor: "white",
+            fillOpacity: 1,
+            rx: 3
+        });
+        drawText({
+            svg,
+            x: labelX,
+            y: labelY,
+            text: label,
+            fontSize: fontSize,
+            color: arrowColor,
+            fontWeight: "600"
+        });
+    }
+    // Move all newly appended children into a <g data-dimension> group
+    const group = document.createElementNS("http://www.w3.org/2000/svg", 'g');
+    group.setAttribute('data-dimension', 'true');
+    const newChildren = [];
+    for (let i = childCountBefore; i < svg.childElementCount; i++) {
+        newChildren.push(svg.children[i]);
+    }
+    for (const child of newChildren) {
+        group.appendChild(child);
+    }
+    svg.appendChild(group);
+}
+export function drawPolygon({ svg, points, fillColor, borderColor, borderWidth = 0, fillOpacity = 1 }) {
+    const polygon = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
+    polygon.setAttribute("points", points);
+    polygon.setAttribute("fill", fillColor);
+    polygon.setAttribute("fill-opacity", fillOpacity.toString());
+    if (borderColor && borderWidth > 0) {
+        polygon.setAttribute("stroke", borderColor);
+        polygon.setAttribute("stroke-width", borderWidth.toString());
+    }
+    svg.appendChild(polygon);
+}