@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebhookConfigPanel.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.tsx"],"sourcesContent":["/**\n * WebhookConfigPanel Component (v2.0)\n *\n * Panel for managing event webhook mappings.\n * Allows creating, editing, testing, and deleting webhooks.\n */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport {\n  useEventWebhooks,\n  type HttpMethod,\n  type EventWebhookMapping,\n  type CreateEventWebhookMappingInput,\n  type UpdateEventWebhookMappingInput,\n  type WebhookTestResult,\n} from '../../../hooks/useEventWebhooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WebhookConfigPanelProps {\n  /** Dashboard ID for webhook scope */\n  dashboardId?: string;\n  /** Widget ID for webhook scope */\n  widgetId?: string;\n  /** Callback when webhook is created */\n  onWebhookCreated?: (webhook: EventWebhookMapping) => void;\n  /** Callback when webhook is deleted */\n  onWebhookDeleted?: (id: string) => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    padding: '16px',\n    backgroundColor: '#ffffff',\n    borderRadius: '8px',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: '#111827',\n    margin: 0,\n  } as React.CSSProperties,\n  addButton: {\n    padding: '8px 16px',\n    backgroundColor: '#2563eb',\n    color: '#ffffff',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    fontWeight: 500,\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  webhookList: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as React.CSSProperties,\n  webhookCard: {\n    padding: '16px',\n    backgroundColor: '#f9fafb',\n    borderRadius: '8px',\n    border: '1px solid #e5e7eb',\n  } as React.CSSProperties,\n  webhookHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'flex-start',\n    marginBottom: '8px',\n  } as React.CSSProperties,\n  webhookTitle: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as React.CSSProperties,\n  webhookName: {\n    fontSize: '14px',\n    fontWeight: 600,\n    color: '#111827',\n  } as React.CSSProperties,\n  statusBadge: {\n    padding: '2px 8px',\n    borderRadius: '12px',\n    fontSize: '12px',\n    fontWeight: 500,\n  } as React.CSSProperties,\n  activeBadge: {\n    backgroundColor: '#d1fae5',\n    color: '#065f46',\n  } as React.CSSProperties,\n  inactiveBadge: {\n    backgroundColor: '#fef3c7',\n    color: '#92400e',\n  } as React.CSSProperties,\n  webhookDetails: {\n    fontSize: '13px',\n    color: '#6b7280',\n    marginBottom: '4px',\n  } as React.CSSProperties,\n  webhookUrl: {\n    fontSize: '12px',\n    color: '#9ca3af',\n    fontFamily: 'monospace',\n    wordBreak: 'break-all',\n  } as React.CSSProperties,\n  webhookActions: {\n    display: 'flex',\n    gap: '8px',\n    marginTop: '12px',\n  } as React.CSSProperties,\n  actionButton: {\n    padding: '6px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    borderRadius: '4px',\n    border: 'none',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  editButton: {\n    backgroundColor: '#e5e7eb',\n    color: '#374151',\n  } as React.CSSProperties,\n  testButton: {\n    backgroundColor: '#dbeafe',\n    color: '#1d4ed8',\n  } as React.CSSProperties,\n  deleteButton: {\n    backgroundColor: '#fee2e2',\n    color: '#dc2626',\n  } as React.CSSProperties,\n  toggleButton: {\n    backgroundColor: '#f3f4f6',\n    color: '#6b7280',\n  } as React.CSSProperties,\n  emptyState: {\n    textAlign: 'center',\n    padding: '32px',\n    color: '#9ca3af',\n  } as React.CSSProperties,\n  form: {\n    padding: '16px',\n    backgroundColor: '#f9fafb',\n    borderRadius: '8px',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  formGroup: {\n    marginBottom: '12px',\n  } as React.CSSProperties,\n  label: {\n    display: 'block',\n    fontSize: '13px',\n    fontWeight: 500,\n    color: '#374151',\n    marginBottom: '4px',\n  } as React.CSSProperties,\n  input: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid #d1d5db',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n  } as React.CSSProperties,\n  select: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid #d1d5db',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n    backgroundColor: '#ffffff',\n  } as React.CSSProperties,\n  textarea: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid #d1d5db',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n    fontFamily: 'monospace',\n    minHeight: '80px',\n    resize: 'vertical',\n  } as React.CSSProperties,\n  formActions: {\n    display: 'flex',\n    gap: '8px',\n    justifyContent: 'flex-end',\n    marginTop: '16px',\n  } as React.CSSProperties,\n  cancelButton: {\n    padding: '8px 16px',\n    backgroundColor: '#f3f4f6',\n    color: '#374151',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  saveButton: {\n    padding: '8px 16px',\n    backgroundColor: '#2563eb',\n    color: '#ffffff',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    fontWeight: 500,\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  testResult: {\n    marginTop: '12px',\n    padding: '12px',\n    borderRadius: '6px',\n    fontSize: '13px',\n  } as React.CSSProperties,\n  testSuccess: {\n    backgroundColor: '#d1fae5',\n    color: '#065f46',\n  } as React.CSSProperties,\n  testFailure: {\n    backgroundColor: '#fee2e2',\n    color: '#991b1b',\n  } as React.CSSProperties,\n  helpText: {\n    fontSize: '12px',\n    color: '#9ca3af',\n    marginTop: '4px',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Webhook Form Component\n// ============================================================================\n\ninterface WebhookFormProps {\n  webhook?: EventWebhookMapping;\n  dashboardId?: string;\n  widgetId?: string;\n  onSave: (data: CreateEventWebhookMappingInput | UpdateEventWebhookMappingInput) => Promise<void>;\n  onCancel: () => void;\n  loading?: boolean;\n}\n\nconst WebhookForm: React.FC<WebhookFormProps> = memo(function WebhookForm({\n  webhook,\n  dashboardId,\n  widgetId,\n  onSave,\n  onCancel,\n  loading,\n}) {\n  const [eventPattern, setEventPattern] = useState(webhook?.eventPattern || 'widget:*:clicked');\n  const [webhookUrl, setWebhookUrl] = useState(webhook?.webhookUrl || '');\n  const [method, setMethod] = useState(webhook?.method || 'POST');\n  const [headers, setHeaders] = useState(webhook?.headers ? JSON.stringify(webhook.headers, null, 2) : '');\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    let parsedHeaders: Record<string, string> | undefined;\n    if (headers.trim()) {\n      try {\n        parsedHeaders = JSON.parse(headers);\n      } catch {\n        alert('Invalid JSON in headers field');\n        return;\n      }\n    }\n\n    if (webhook) {\n      // Update\n      await onSave({\n        id: webhook.id,\n        eventPattern,\n        webhookUrl,\n        method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',\n        headers: parsedHeaders || null,\n      });\n    } else {\n      // Create\n      await onSave({\n        dashboardId,\n        widgetId,\n        eventPattern,\n        webhookUrl,\n        method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',\n        headers: parsedHeaders,\n      });\n    }\n  };\n\n  return (\n    <form style={styles.form} onSubmit={handleSubmit}>\n      <div style={styles.formGroup}>\n        <label style={styles.label}>Event Pattern *</label>\n        <input\n          type=\"text\"\n          value={eventPattern}\n          onChange={(e) => setEventPattern(e.target.value)}\n          placeholder=\"widget:*:clicked\"\n          style={styles.input}\n          required\n        />\n        <p style={styles.helpText}>Use * as wildcard. Examples: widget:*:clicked, *:submit, button:save:*</p>\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>Webhook URL *</label>\n        <input\n          type=\"url\"\n          value={webhookUrl}\n          onChange={(e) => setWebhookUrl(e.target.value)}\n          placeholder=\"https://your-api.com/webhooks/bigconsole\"\n          style={styles.input}\n          required\n        />\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>HTTP Method</label>\n        <select value={method} onChange={(e) => setMethod(e.target.value as HttpMethod)} style={styles.select}>\n          <option value=\"POST\">POST</option>\n          <option value=\"PUT\">PUT</option>\n          <option value=\"PATCH\">PATCH</option>\n          <option value=\"GET\">GET</option>\n          <option value=\"DELETE\">DELETE</option>\n        </select>\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>Custom Headers (JSON)</label>\n        <textarea\n          value={headers}\n          onChange={(e) => setHeaders(e.target.value)}\n          placeholder={'{\\n  \"Authorization\": \"Bearer your-token\"\\n}'}\n          style={styles.textarea as React.CSSProperties}\n        />\n      </div>\n\n      <div style={styles.formActions}>\n        <button type=\"button\" onClick={onCancel} style={styles.cancelButton}>\n          Cancel\n        </button>\n        <button type=\"submit\" disabled={loading} style={styles.saveButton}>\n          {loading ? 'Saving...' : webhook ? 'Update Webhook' : 'Create Webhook'}\n        </button>\n      </div>\n    </form>\n  );\n});\n\n// ============================================================================\n// Webhook Card Component\n// ============================================================================\n\ninterface WebhookCardProps {\n  webhook: EventWebhookMapping;\n  onEdit: () => void;\n  onDelete: () => void;\n  onToggle: () => void;\n  onTest: () => void;\n  testResult?: WebhookTestResult | null;\n  testing?: boolean;\n}\n\nconst WebhookCard: React.FC<WebhookCardProps> = memo(function WebhookCard({\n  webhook,\n  onEdit,\n  onDelete,\n  onToggle,\n  onTest,\n  testResult,\n  testing,\n}) {\n  return (\n    <div style={styles.webhookCard}>\n      <div style={styles.webhookHeader}>\n        <div style={styles.webhookTitle}>\n          <span style={{ fontSize: '16px' }}>📡</span>\n          <span style={styles.webhookName}>{webhook.eventPattern}</span>\n          <span\n            style={{\n              ...styles.statusBadge,\n              ...(webhook.isActive ? styles.activeBadge : styles.inactiveBadge),\n            }}\n          >\n            {webhook.isActive ? 'Active' : 'Inactive'}\n          </span>\n        </div>\n      </div>\n\n      <div style={styles.webhookDetails}>\n        Method: <strong>{webhook.method}</strong>\n      </div>\n      <div style={styles.webhookUrl}>{webhook.webhookUrl}</div>\n\n      {testResult && (\n        <div\n          style={{\n            ...styles.testResult,\n            ...(testResult.success ? styles.testSuccess : styles.testFailure),\n          }}\n        >\n          {testResult.success ? (\n            <>\n              ✅ Test successful! Status: {testResult.statusCode}, Latency: {testResult.latencyMs}ms\n            </>\n          ) : (\n            <>❌ Test failed: {testResult.errorMessage || 'Unknown error'}</>\n          )}\n        </div>\n      )}\n\n      <div style={styles.webhookActions}>\n        <button onClick={onEdit} style={{ ...styles.actionButton, ...styles.editButton }}>\n          Edit\n        </button>\n        <button onClick={onTest} disabled={testing} style={{ ...styles.actionButton, ...styles.testButton }}>\n          {testing ? 'Testing...' : 'Test'}\n        </button>\n        <button onClick={onToggle} style={{ ...styles.actionButton, ...styles.toggleButton }}>\n          {webhook.isActive ? 'Disable' : 'Enable'}\n        </button>\n        <button onClick={onDelete} style={{ ...styles.actionButton, ...styles.deleteButton }}>\n          Delete\n        </button>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const WebhookConfigPanel: React.FC<WebhookConfigPanelProps> = memo(function WebhookConfigPanel({\n  dashboardId,\n  widgetId,\n  onWebhookCreated,\n  onWebhookDeleted,\n}) {\n  const [showForm, setShowForm] = useState(false);\n  const [editingWebhook, setEditingWebhook] = useState<EventWebhookMapping | null>(null);\n  const [testResults, setTestResults] = useState<Record<string, WebhookTestResult | null>>({});\n  const [testingId, setTestingId] = useState<string | null>(null);\n\n  const { webhooks, loading, createWebhook, updateWebhook, deleteWebhook, toggleWebhook, testWebhook } =\n    useEventWebhooks({ dashboardId, widgetId });\n\n  const handleSave = useCallback(\n    async (data: CreateEventWebhookMappingInput | UpdateEventWebhookMappingInput) => {\n      if ('id' in data) {\n        const result = await updateWebhook(data);\n        if (result) {\n          setEditingWebhook(null);\n          setShowForm(false);\n        }\n      } else {\n        const result = await createWebhook(data);\n        if (result) {\n          setShowForm(false);\n          onWebhookCreated?.(result);\n        }\n      }\n    },\n    [createWebhook, updateWebhook, onWebhookCreated]\n  );\n\n  const handleDelete = useCallback(\n    async (id: string) => {\n      if (confirm('Are you sure you want to delete this webhook?')) {\n        const success = await deleteWebhook(id);\n        if (success) {\n          onWebhookDeleted?.(id);\n        }\n      }\n    },\n    [deleteWebhook, onWebhookDeleted]\n  );\n\n  const handleToggle = useCallback(\n    async (webhook: EventWebhookMapping) => {\n      await toggleWebhook(webhook.id, !webhook.isActive);\n    },\n    [toggleWebhook]\n  );\n\n  const handleTest = useCallback(\n    async (id: string) => {\n      setTestingId(id);\n      const result = await testWebhook(id);\n      setTestResults((prev) => ({ ...prev, [id]: result }));\n      setTestingId(null);\n    },\n    [testWebhook]\n  );\n\n  const handleEdit = useCallback((webhook: EventWebhookMapping) => {\n    setEditingWebhook(webhook);\n    setShowForm(true);\n  }, []);\n\n  const handleCancel = useCallback(() => {\n    setShowForm(false);\n    setEditingWebhook(null);\n  }, []);\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <h3 style={styles.title}>Webhook Configuration</h3>\n        {!showForm && (\n          <button onClick={() => setShowForm(true)} style={styles.addButton}>\n            + Add Webhook\n          </button>\n        )}\n      </div>\n\n      {showForm && (\n        <WebhookForm\n          webhook={editingWebhook || undefined}\n          dashboardId={dashboardId}\n          widgetId={widgetId}\n          onSave={handleSave}\n          onCancel={handleCancel}\n          loading={loading}\n        />\n      )}\n\n      {loading && webhooks.length === 0 ? (\n        <div style={styles.emptyState}>Loading...</div>\n      ) : webhooks.length === 0 ? (\n        <div style={styles.emptyState}>\n          <p>No webhooks configured</p>\n          <p style={{ fontSize: '13px', marginTop: '8px' }}>\n            Add a webhook to receive events when actions are triggered.\n          </p>\n        </div>\n      ) : (\n        <div style={styles.webhookList as React.CSSProperties}>\n          {webhooks.map((webhook) => (\n            <WebhookCard\n              key={webhook.id}\n              webhook={webhook}\n              onEdit={() => handleEdit(webhook)}\n              onDelete={() => handleDelete(webhook.id)}\n              onToggle={() => handleToggle(webhook)}\n              onTest={() => handleTest(webhook.id)}\n              testResult={testResults[webhook.id]}\n              testing={testingId === webhook.id}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default WebhookConfigPanel;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/webhook-config/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Webhook Config Components
+ */
+export { WebhookConfigPanel, type WebhookConfigPanelProps } from './WebhookConfigPanel';
+export { default } from './WebhookConfigPanel';
+//# sourceMappingURL=index.d.ts.map

package/dist/bigconsole/components/widgets/webhook-config/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/webhook-config/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/bigconsole/components/widgets/webhook-config/index.js

@@ -0,0 +1 @@
+import "./WebhookConfigPanel.js";

package/dist/bigconsole/components/widgets/widget-actions/WidgetActions.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { WidgetAction, ActionContext, ActionResult } from '../../../renderers/types/renderer';
+
+export interface WidgetActionsProps {
+    /** List of actions to render */
+    actions: WidgetAction[];
+    /** Action context (widget ID, data, etc.) */
+    context: ActionContext;
+    /** Callback when action is triggered */
+    onAction?: (action: WidgetAction, context: ActionContext) => Promise<ActionResult | void>;
+    /** Whether actions are disabled */
+    disabled?: boolean;
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Size of action buttons */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show labels */
+    showLabels?: boolean;
+    /** Maximum number of visible actions (rest go to overflow menu) */
+    maxVisible?: number;
+    /** Custom class name */
+    className?: string;
+}
+export declare const WidgetActions: React.FC<WidgetActionsProps>;
+export default WidgetActions;
+//# sourceMappingURL=WidgetActions.d.ts.map

package/dist/bigconsole/components/widgets/widget-actions/WidgetActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetActions.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/widget-actions/WidgetActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAMnG,MAAM,WAAW,kBAAkB;IACjC,gCAAgC;IAChC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,6CAA6C;IAC7C,OAAO,EAAE,aAAa,CAAC;IACvB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAC1F,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAifD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwHrD,CAAC;AAEH,eAAe,aAAa,CAAC"}

package/dist/bigconsole/components/widgets/widget-actions/WidgetActions.js

@@ -0,0 +1,467 @@
+import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPortal as l } from "react-dom";
+//#region src/bigconsole/components/widgets/widget-actions/WidgetActions.tsx
+function u(e, t, n) {
+	let r = {
+		sm: "px-2.5 py-1.5 text-xs",
+		md: "px-4 py-2 text-sm",
+		lg: "px-6 py-3 text-base"
+	}, i = {
+		PRIMARY: "bg-action-primary text-white hover:bg-action-primary/90 focus:ring-action-primary/50 transition-colors",
+		SECONDARY: "bg-muted text-primary hover:bg-muted/80 focus:ring-muted transition-colors",
+		DANGER: "bg-state-error text-white hover:bg-state-error/90 focus:ring-state-error/50 transition-colors",
+		SUCCESS: "bg-state-success text-white hover:bg-state-success/90 focus:ring-state-success/50 transition-colors",
+		WARNING: "bg-state-warning text-white hover:bg-state-warning/90 focus:ring-state-warning/50 transition-colors"
+	}, a = n ? "opacity-50 cursor-not-allowed" : "cursor-pointer", o = i[e || "SECONDARY"] || i.SECONDARY;
+	return `inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${r[t]} ${o} ${a}`;
+}
+function d(e) {
+	let t = {
+		PRIMARY: {
+			backgroundColor: "var(--color-action-primary-bg)",
+			color: "var(--color-action-primary-text)"
+		},
+		SECONDARY: {
+			backgroundColor: "var(--color-bg-muted)",
+			color: "var(--color-text-primary)"
+		},
+		DANGER: {
+			backgroundColor: "var(--color-status-error-bg)",
+			color: "var(--color-action-primary-text)"
+		},
+		SUCCESS: {
+			backgroundColor: "var(--color-status-success-bg)",
+			color: "var(--color-action-primary-text)"
+		},
+		WARNING: {
+			backgroundColor: "var(--color-status-warning-bg)",
+			color: "var(--color-action-primary-text)"
+		}
+	};
+	return t[e || "SECONDARY"] || t.SECONDARY;
+}
+function f(e) {
+	let t = {
+		PRIMARY: "bg-action-primary text-white hover:bg-action-primary/90",
+		SECONDARY: "bg-secondary text-white hover:bg-secondary/90",
+		DANGER: "bg-state-error text-white hover:bg-state-error/90",
+		SUCCESS: "bg-state-success text-white hover:bg-state-success/90",
+		WARNING: "bg-state-warning text-white hover:bg-state-warning/90"
+	};
+	return `px-4 py-2 text-sm font-medium rounded-md transition-colors ${t[e || "PRIMARY"] || t.PRIMARY}`;
+}
+function p(e) {
+	let t = {
+		PRIMARY: {
+			backgroundColor: "var(--color-action-primary-bg)",
+			color: "var(--color-action-primary-text)",
+			padding: "8px 16px",
+			borderRadius: "6px",
+			fontWeight: 500
+		},
+		SECONDARY: {
+			backgroundColor: "var(--color-text-secondary)",
+			color: "var(--color-action-primary-text)",
+			padding: "8px 16px",
+			borderRadius: "6px",
+			fontWeight: 500
+		},
+		DANGER: {
+			backgroundColor: "var(--color-status-error-bg)",
+			color: "var(--color-action-primary-text)",
+			padding: "8px 16px",
+			borderRadius: "6px",
+			fontWeight: 500
+		},
+		SUCCESS: {
+			backgroundColor: "var(--color-status-success-bg)",
+			color: "var(--color-action-primary-text)",
+			padding: "8px 16px",
+			borderRadius: "6px",
+			fontWeight: 500
+		},
+		WARNING: {
+			backgroundColor: "var(--color-status-warning-bg)",
+			color: "var(--color-action-primary-text)",
+			padding: "8px 16px",
+			borderRadius: "6px",
+			fontWeight: 500
+		}
+	};
+	return t[e || "PRIMARY"] || t.PRIMARY;
+}
+var m = e(function({ name: e, className: t = "w-4 h-4" }) {
+	return {
+		"external-link": /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+			})
+		}),
+		save: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+			})
+		}),
+		trash: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+			})
+		}),
+		edit: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+			})
+		}),
+		refresh: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+			})
+		}),
+		download: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+			})
+		}),
+		upload: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+			})
+		}),
+		plus: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M12 4v16m8-8H4"
+			})
+		}),
+		check: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M5 13l4 4L19 7"
+			})
+		}),
+		x: /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M6 18L18 6M6 6l12 12"
+			})
+		}),
+		"more-horizontal": /* @__PURE__ */ s("svg", {
+			className: t,
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ s("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
+			})
+		})
+	}[e] || null;
+}), h = e(function({ title: e, message: t, confirmLabel: n, cancelLabel: r, style: i, onConfirm: a, onCancel: o }) {
+	return /* @__PURE__ */ c("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			zIndex: 9999,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: [/* @__PURE__ */ s("div", {
+			className: "absolute inset-0 bg-black/50",
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				backgroundColor: "rgba(0,0,0,0.5)"
+			},
+			onClick: o
+		}), /* @__PURE__ */ c("div", {
+			className: "relative bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6 animate-in fade-in zoom-in-95 duration-200",
+			style: {
+				position: "relative",
+				backgroundColor: "var(--color-bg-surface)",
+				borderRadius: "8px",
+				boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+				maxWidth: "28rem",
+				width: "100%",
+				margin: "0 16px",
+				padding: "24px",
+				zIndex: 1e4
+			},
+			children: [
+				/* @__PURE__ */ s("h3", {
+					className: "text-lg font-semibold text-primary",
+					style: {
+						fontSize: "18px",
+						fontWeight: 600,
+						color: "var(--color-text-primary)",
+						margin: 0
+					},
+					children: e
+				}),
+				/* @__PURE__ */ s("p", {
+					className: "mt-2 text-sm text-secondary",
+					style: {
+						marginTop: "8px",
+						fontSize: "14px",
+						color: "var(--color-text-secondary)"
+					},
+					children: t
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "mt-4 flex justify-end gap-3",
+					style: {
+						marginTop: "16px",
+						display: "flex",
+						justifyContent: "flex-end",
+						gap: "12px"
+					},
+					children: [/* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: o,
+						className: "px-4 py-2 text-sm font-medium text-secondary bg-muted hover:bg-muted/80 rounded-md transition-colors",
+						style: {
+							padding: "8px 16px",
+							fontSize: "14px",
+							fontWeight: 500,
+							color: "var(--color-text-secondary)",
+							backgroundColor: "var(--color-bg-muted)",
+							borderRadius: "6px",
+							border: "none",
+							cursor: "pointer"
+						},
+						children: r
+					}), /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: a,
+						className: f(i),
+						style: p(i),
+						children: n
+					})]
+				})
+			]
+		})]
+	});
+}), g = e(function({ actions: e, context: r, onAction: d, disabled: f, size: p }) {
+	let [h, g] = a(!1), _ = i(null), [v, y] = a({
+		top: 0,
+		left: 0
+	}), b = t(() => {
+		f || g((e) => !e);
+	}, [f]), x = t((e) => {
+		g(!1), d(e);
+	}, [d]), S = t(() => {
+		g(!1);
+	}, []);
+	return n(() => {
+		if (h && _.current) {
+			let e = _.current.getBoundingClientRect();
+			y({
+				top: e.bottom + 4,
+				left: e.right - 192
+			});
+		}
+	}, [h]), e.length === 0 ? null : /* @__PURE__ */ c("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ s("button", {
+			ref: _,
+			type: "button",
+			onClick: b,
+			disabled: f,
+			className: u("SECONDARY", p, f ?? !1),
+			"aria-label": "More actions",
+			children: /* @__PURE__ */ s(m, { name: "more-horizontal" })
+		}), h && l(/* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+			className: "fixed inset-0 z-[9998]",
+			onClick: S
+		}), /* @__PURE__ */ s("div", {
+			className: "fixed w-48 bg-surface rounded-md shadow-lg ring-1 ring-border z-[9999] animate-in fade-in slide-in-from-top-2 duration-150",
+			style: {
+				top: v.top,
+				left: Math.max(8, v.left)
+			},
+			children: /* @__PURE__ */ s("div", {
+				className: "py-1",
+				children: e.map((e) => /* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: () => x(e),
+					disabled: e.disabled,
+					className: "w-full text-left px-4 py-2 text-sm text-secondary hover:bg-muted hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors",
+					children: [e.icon && /* @__PURE__ */ s(m, {
+						name: e.icon,
+						className: "w-4 h-4"
+					}), e.label]
+				}, e.id))
+			})
+		})] }), document.body)]
+	});
+}), _ = e(function({ action: e, context: n, onAction: r, disabled: i, size: a, showLabel: o = !0 }) {
+	let l = i || e.disabled, f = t(() => {
+		l || r(e);
+	}, [
+		e,
+		l,
+		r
+	]), p = u(e.style, a, l), h = d(e.style);
+	return e.type === "LINK" && e.metadata?.url ? /* @__PURE__ */ c("a", {
+		href: e.metadata.url,
+		target: e.metadata.target || "_blank",
+		rel: "noopener noreferrer",
+		className: p,
+		style: h,
+		"aria-disabled": l,
+		children: [
+			e.icon && /* @__PURE__ */ s(m, {
+				name: e.icon,
+				className: "w-4 h-4 mr-1.5"
+			}),
+			o && e.label,
+			!e.icon && /* @__PURE__ */ s(m, {
+				name: "external-link",
+				className: "w-4 h-4 ml-1.5"
+			})
+		]
+	}) : /* @__PURE__ */ c("button", {
+		type: e.type === "SUBMIT" ? "submit" : "button",
+		onClick: f,
+		disabled: l,
+		className: p,
+		style: h,
+		children: [e.icon && /* @__PURE__ */ s(m, {
+			name: e.icon,
+			className: "w-4 h-4 mr-1.5"
+		}), o && e.label]
+	});
+}), v = e(function({ actions: e, context: n, onAction: i, disabled: l = !1, layout: u = "horizontal", size: d = "md", showLabels: f = !0, maxVisible: p = 3, className: m = "" }) {
+	let [v, y] = a(null), [b, x] = a(!1), S = r(() => e.filter((e) => !e.hidden).sort((e, t) => e.order - t.order), [e]), { mainActions: C, overflowActions: w } = r(() => S.length <= p ? {
+		mainActions: S,
+		overflowActions: []
+	} : {
+		mainActions: S.slice(0, p - 1),
+		overflowActions: S.slice(p - 1)
+	}, [S, p]), T = t(async (e) => {
+		if (i) {
+			x(!0);
+			try {
+				await i(e, n);
+			} catch {} finally {
+				x(!1);
+			}
+		}
+	}, [i, n]), E = t((e) => {
+		if (e.confirmation) {
+			y(e);
+			return;
+		}
+		T(e);
+	}, [T]), D = t(() => {
+		v && (T(v), y(null));
+	}, [v, T]), O = t(() => {
+		y(null);
+	}, []);
+	return S.length === 0 ? null : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c("div", {
+		className: `${u === "horizontal" ? "flex flex-row flex-wrap gap-2" : "flex flex-col gap-2"} ${m}`,
+		children: [C.map((e) => /* @__PURE__ */ s(_, {
+			action: e,
+			context: n,
+			onAction: E,
+			disabled: l || b,
+			size: d,
+			showLabel: f
+		}, e.id)), w.length > 0 && /* @__PURE__ */ s(g, {
+			actions: w,
+			context: n,
+			onAction: E,
+			disabled: l || b,
+			size: d
+		})]
+	}), v?.confirmation && /* @__PURE__ */ s(h, {
+		title: v.confirmation.title || "Confirm Action",
+		message: v.confirmation.message || "Are you sure you want to proceed?",
+		confirmLabel: v.confirmation.confirmLabel || "OK",
+		cancelLabel: v.confirmation.cancelLabel || "Cancel",
+		style: v.style,
+		onConfirm: D,
+		onCancel: O
+	})] });
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=WidgetActions.js.map

package/dist/bigconsole/components/widgets/widget-actions/WidgetActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetActions.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/widget-actions/WidgetActions.tsx"],"sourcesContent":["/**\n * Widget Actions Component (v2.0)\n *\n * Renders interactive action buttons for widgets.\n * Supports multiple action types, styles, confirmation dialogs, and icons.\n */\n\nimport React, { memo, useCallback, useState, useMemo, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { WidgetAction, ActionContext, ActionResult } from '../../../renderers/types/renderer';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetActionsProps {\n  /** List of actions to render */\n  actions: WidgetAction[];\n  /** Action context (widget ID, data, etc.) */\n  context: ActionContext;\n  /** Callback when action is triggered */\n  onAction?: (action: WidgetAction, context: ActionContext) => Promise<ActionResult | void>;\n  /** Whether actions are disabled */\n  disabled?: boolean;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Size of action buttons */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to show labels */\n  showLabels?: boolean;\n  /** Maximum number of visible actions (rest go to overflow menu) */\n  maxVisible?: number;\n  /** Custom class name */\n  className?: string;\n}\n\ninterface ConfirmationDialogProps {\n  title: string;\n  message: string;\n  confirmLabel: string;\n  cancelLabel: string;\n  style: WidgetAction['style'];\n  onConfirm: () => void;\n  onCancel: () => void;\n}\n\n// ============================================================================\n// Style Utilities\n// ============================================================================\n\nfunction getButtonClasses(\n  style: WidgetAction['style'] | undefined,\n  size: 'sm' | 'md' | 'lg',\n  disabled: boolean\n): string {\n  const baseClasses =\n    'inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';\n\n  const sizeClasses = {\n    sm: 'px-2.5 py-1.5 text-xs',\n    md: 'px-4 py-2 text-sm',\n    lg: 'px-6 py-3 text-base',\n  };\n\n  const styleClasses: Record<string, string> = {\n    PRIMARY: 'bg-action-primary text-white hover:bg-action-primary/90 focus:ring-action-primary/50 transition-colors',\n    SECONDARY: 'bg-muted text-primary hover:bg-muted/80 focus:ring-muted transition-colors',\n    DANGER: 'bg-state-error text-white hover:bg-state-error/90 focus:ring-state-error/50 transition-colors',\n    SUCCESS: 'bg-state-success text-white hover:bg-state-success/90 focus:ring-state-success/50 transition-colors',\n    WARNING: 'bg-state-warning text-white hover:bg-state-warning/90 focus:ring-state-warning/50 transition-colors',\n  };\n\n  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';\n\n  // Default to SECONDARY if style is undefined\n  const effectiveStyle = style || 'SECONDARY';\n  const styleClass = styleClasses[effectiveStyle] || styleClasses.SECONDARY;\n\n  return `${baseClasses} ${sizeClasses[size]} ${styleClass} ${disabledClasses}`;\n}\n\n// Get inline styles as fallback for button visibility\nfunction getButtonInlineStyles(style: WidgetAction['style'] | undefined): React.CSSProperties {\n  const styles: Record<string, React.CSSProperties> = {\n    PRIMARY: { backgroundColor: 'var(--color-action-primary-bg)', color: 'var(--color-action-primary-text)' },\n    SECONDARY: { backgroundColor: 'var(--color-bg-muted)', color: 'var(--color-text-primary)' },\n    DANGER: { backgroundColor: 'var(--color-status-error-bg)', color: 'var(--color-action-primary-text)' },\n    SUCCESS: { backgroundColor: 'var(--color-status-success-bg)', color: 'var(--color-action-primary-text)' },\n    WARNING: { backgroundColor: 'var(--color-status-warning-bg)', color: 'var(--color-action-primary-text)' },\n  };\n  const effectiveStyle = style || 'SECONDARY';\n  return styles[effectiveStyle] || styles.SECONDARY;\n}\n\nfunction getConfirmButtonClasses(style: WidgetAction['style']): string {\n  const styleClasses = {\n    PRIMARY: 'bg-action-primary text-white hover:bg-action-primary/90',\n    SECONDARY: 'bg-secondary text-white hover:bg-secondary/90',\n    DANGER: 'bg-state-error text-white hover:bg-state-error/90',\n    SUCCESS: 'bg-state-success text-white hover:bg-state-success/90',\n    WARNING: 'bg-state-warning text-white hover:bg-state-warning/90',\n  };\n\n  const effectiveStyle = style || 'PRIMARY';\n  return `px-4 py-2 text-sm font-medium rounded-md transition-colors ${styleClasses[effectiveStyle] || styleClasses.PRIMARY}`;\n}\n\n// Get inline styles for confirm button to ensure visibility\nfunction getConfirmButtonInlineStyles(style: WidgetAction['style'] | undefined): React.CSSProperties {\n  const styles: Record<string, React.CSSProperties> = {\n    PRIMARY: {\n      backgroundColor: 'var(--color-action-primary-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    SECONDARY: {\n      backgroundColor: 'var(--color-text-secondary)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    DANGER: {\n      backgroundColor: 'var(--color-status-error-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    SUCCESS: {\n      backgroundColor: 'var(--color-status-success-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    WARNING: {\n      backgroundColor: 'var(--color-status-warning-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n  };\n  const effectiveStyle = style || 'PRIMARY';\n  return styles[effectiveStyle] || styles.PRIMARY;\n}\n\n// ============================================================================\n// Icon Component\n// ============================================================================\n\ninterface ActionIconProps {\n  name: string;\n  className?: string;\n}\n\nconst ActionIcon: React.FC<ActionIconProps> = memo(function ActionIcon({ name, className = 'w-4 h-4' }) {\n  // Common icons used in actions\n  const icons: Record<string, React.ReactNode> = {\n    'external-link': (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n        />\n      </svg>\n    ),\n    save: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4\"\n        />\n      </svg>\n    ),\n    trash: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n        />\n      </svg>\n    ),\n    edit: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n        />\n      </svg>\n    ),\n    refresh: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n        />\n      </svg>\n    ),\n    download: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n        />\n      </svg>\n    ),\n    upload: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\"\n        />\n      </svg>\n    ),\n    plus: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n      </svg>\n    ),\n    check: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n      </svg>\n    ),\n    x: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    ),\n    'more-horizontal': (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\"\n        />\n      </svg>\n    ),\n  };\n\n  return icons[name] || null;\n});\n\n// ============================================================================\n// Confirmation Dialog\n// ============================================================================\n\nconst ConfirmationDialog: React.FC<ConfirmationDialogProps> = memo(function ConfirmationDialog({\n  title,\n  message,\n  confirmLabel,\n  cancelLabel,\n  style,\n  onConfirm,\n  onCancel,\n}) {\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center\"\n      style={{\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        zIndex: 9999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)' }}\n        onClick={onCancel}\n      />\n\n      {/* Dialog */}\n      <div\n        className=\"relative bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6 animate-in fade-in zoom-in-95 duration-200\"\n        style={{\n          position: 'relative',\n          backgroundColor: 'var(--color-bg-surface)',\n          borderRadius: '8px',\n          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n          maxWidth: '28rem',\n          width: '100%',\n          margin: '0 16px',\n          padding: '24px',\n          zIndex: 10000,\n        }}\n      >\n        <h3\n          className=\"text-lg font-semibold text-primary\"\n          style={{ fontSize: '18px', fontWeight: 600, color: 'var(--color-text-primary)', margin: 0 }}\n        >\n          {title}\n        </h3>\n        <p\n          className=\"mt-2 text-sm text-secondary\"\n          style={{ marginTop: '8px', fontSize: '14px', color: 'var(--color-text-secondary)' }}\n        >\n          {message}\n        </p>\n        <div\n          className=\"mt-4 flex justify-end gap-3\"\n          style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-end', gap: '12px' }}\n        >\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            className=\"px-4 py-2 text-sm font-medium text-secondary bg-muted hover:bg-muted/80 rounded-md transition-colors\"\n            style={{\n              padding: '8px 16px',\n              fontSize: '14px',\n              fontWeight: 500,\n              color: 'var(--color-text-secondary)',\n              backgroundColor: 'var(--color-bg-muted)',\n              borderRadius: '6px',\n              border: 'none',\n              cursor: 'pointer',\n            }}\n          >\n            {cancelLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            className={getConfirmButtonClasses(style)}\n            style={getConfirmButtonInlineStyles(style)}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Overflow Menu\n// ============================================================================\n\ninterface OverflowMenuProps {\n  actions: WidgetAction[];\n  context: ActionContext;\n  onAction: (action: WidgetAction) => void;\n  disabled?: boolean;\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst OverflowMenu: React.FC<OverflowMenuProps> = memo(function OverflowMenu({\n  actions,\n  context: _context,\n  onAction,\n  disabled,\n  size,\n}) {\n  const [isOpen, setIsOpen] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });\n\n  const handleToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prev) => !prev);\n    }\n  }, [disabled]);\n\n  const handleAction = useCallback(\n    (action: WidgetAction) => {\n      setIsOpen(false);\n      onAction(action);\n    },\n    [onAction]\n  );\n\n  const handleClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  // Calculate menu position when opening\n  useEffect(() => {\n    if (isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setMenuPosition({\n        top: rect.bottom + 4, // 4px gap below button\n        left: rect.right - 192, // 192px = w-48, align right edge\n      });\n    }\n  }, [isOpen]);\n\n  if (actions.length === 0) return null;\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={disabled}\n        className={getButtonClasses('SECONDARY', size, disabled ?? false)}\n        aria-label=\"More actions\"\n      >\n        <ActionIcon name=\"more-horizontal\" />\n      </button>\n\n      {isOpen &&\n        createPortal(\n          <>\n            {/* Click-outside handler */}\n            <div className=\"fixed inset-0 z-[9998]\" onClick={handleClickOutside} />\n\n            {/* Menu - rendered via portal at body level */}\n            <div\n              className=\"fixed w-48 bg-surface rounded-md shadow-lg ring-1 ring-border z-[9999] animate-in fade-in slide-in-from-top-2 duration-150\"\n              style={{\n                top: menuPosition.top,\n                left: Math.max(8, menuPosition.left), // Ensure at least 8px from left edge\n              }}\n            >\n              <div className=\"py-1\">\n                {actions.map((action) => (\n                  <button\n                    key={action.id}\n                    type=\"button\"\n                    onClick={() => handleAction(action)}\n                    disabled={action.disabled}\n                    className=\"w-full text-left px-4 py-2 text-sm text-secondary hover:bg-muted hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors\"\n                  >\n                    {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4\" />}\n                    {action.label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          </>,\n          document.body\n        )}\n    </div>\n  );\n});\n\n// ============================================================================\n// Action Button\n// ============================================================================\n\ninterface ActionButtonProps {\n  action: WidgetAction;\n  context: ActionContext;\n  onAction: (action: WidgetAction) => void;\n  disabled?: boolean;\n  size: 'sm' | 'md' | 'lg';\n  showLabel?: boolean;\n}\n\nconst ActionButton: React.FC<ActionButtonProps> = memo(function ActionButton({\n  action,\n  context: _context,\n  onAction,\n  disabled,\n  size,\n  showLabel = true,\n}) {\n  const isDisabled = disabled || action.disabled;\n\n  const handleClick = useCallback(() => {\n    if (!isDisabled) {\n      onAction(action);\n    }\n  }, [action, isDisabled, onAction]);\n\n  // Get both classes and inline styles for guaranteed visibility\n  const buttonClasses = getButtonClasses(action.style, size, isDisabled);\n  const buttonInlineStyles = getButtonInlineStyles(action.style);\n\n  // Handle LINK type\n  if (action.type === 'LINK' && action.metadata?.url) {\n    return (\n      <a\n        href={action.metadata.url as string}\n        target={(action.metadata.target as string) || '_blank'}\n        rel=\"noopener noreferrer\"\n        className={buttonClasses}\n        style={buttonInlineStyles}\n        aria-disabled={isDisabled}\n      >\n        {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4 mr-1.5\" />}\n        {showLabel && action.label}\n        {!action.icon && <ActionIcon name=\"external-link\" className=\"w-4 h-4 ml-1.5\" />}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type={action.type === 'SUBMIT' ? 'submit' : 'button'}\n      onClick={handleClick}\n      disabled={isDisabled}\n      className={buttonClasses}\n      style={buttonInlineStyles}\n    >\n      {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4 mr-1.5\" />}\n      {showLabel && action.label}\n    </button>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const WidgetActions: React.FC<WidgetActionsProps> = memo(function WidgetActions({\n  actions,\n  context,\n  onAction,\n  disabled = false,\n  layout = 'horizontal',\n  size = 'md',\n  showLabels = true,\n  maxVisible = 3,\n  className = '',\n}) {\n  const [pendingAction, setPendingAction] = useState<WidgetAction | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Filter visible actions (not hidden)\n  const visibleActions = useMemo(() => {\n    return actions.filter((a) => !a.hidden).sort((a, b) => a.order - b.order);\n  }, [actions]);\n\n  // Split into main and overflow actions\n  const { mainActions, overflowActions } = useMemo(() => {\n    if (visibleActions.length <= maxVisible) {\n      return { mainActions: visibleActions, overflowActions: [] };\n    }\n    return {\n      mainActions: visibleActions.slice(0, maxVisible - 1),\n      overflowActions: visibleActions.slice(maxVisible - 1),\n    };\n  }, [visibleActions, maxVisible]);\n\n  // Execute action\n  const executeAction = useCallback(\n    async (action: WidgetAction) => {\n      if (!onAction) return;\n\n      setIsLoading(true);\n      try {\n        await onAction(action, context);\n      } catch (error) {\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [onAction, context]\n  );\n\n  // Handle action trigger\n  const handleTriggerAction = useCallback(\n    (action: WidgetAction) => {\n      // If action has confirmation, show dialog\n      if (action.confirmation) {\n        setPendingAction(action);\n        return;\n      }\n\n      // Execute action immediately\n      executeAction(action);\n    },\n    [executeAction]\n  );\n\n  // Handle confirmation\n  const handleConfirm = useCallback(() => {\n    if (pendingAction) {\n      executeAction(pendingAction);\n      setPendingAction(null);\n    }\n  }, [pendingAction, executeAction]);\n\n  const handleCancel = useCallback(() => {\n    setPendingAction(null);\n  }, []);\n\n  // No actions to render\n  if (visibleActions.length === 0) {\n    return null;\n  }\n\n  const layoutClasses = layout === 'horizontal' ? 'flex flex-row flex-wrap gap-2' : 'flex flex-col gap-2';\n\n  return (\n    <>\n      <div className={`${layoutClasses} ${className}`}>\n        {mainActions.map((action) => (\n          <ActionButton\n            key={action.id}\n            action={action}\n            context={context}\n            onAction={handleTriggerAction}\n            disabled={disabled || isLoading}\n            size={size}\n            showLabel={showLabels}\n          />\n        ))}\n\n        {overflowActions.length > 0 && (\n          <OverflowMenu\n            actions={overflowActions}\n            context={context}\n            onAction={handleTriggerAction}\n            disabled={disabled || isLoading}\n            size={size}\n          />\n        )}\n      </div>\n\n      {/* Confirmation Dialog */}\n      {pendingAction?.confirmation && (\n        <ConfirmationDialog\n          title={pendingAction.confirmation.title || 'Confirm Action'}\n          message={pendingAction.confirmation.message || 'Are you sure you want to proceed?'}\n          confirmLabel={pendingAction.confirmation.confirmLabel || 'OK'}\n          cancelLabel={pendingAction.confirmation.cancelLabel || 'Cancel'}\n          style={pendingAction.style}\n          onConfirm={handleConfirm}\n          onCancel={handleCancel}\n        />\n      )}\n    </>\n  );\n});\n\nexport default WidgetActions;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/widget-actions/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Widget Actions Module
+ *
+ * Export widget action components and types.
+ */
+export { WidgetActions, type WidgetActionsProps } from './WidgetActions';
+export { default } from './WidgetActions';
+//# sourceMappingURL=index.d.ts.map

package/dist/bigconsole/components/widgets/widget-actions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/widget-actions/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/bigconsole/components/widgets/widget-actions/index.js

@@ -0,0 +1 @@
+import "./WidgetActions.js";