@burdenoff/microfe-bigconsole 2026.804.2 → 2026.805.2

package/dist/bigconsole/components/datasink/ImportDataGuideDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImportDataGuideDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/ImportDataGuideDialog.tsx"],"sourcesContent":["/**\n * Guides a user on how to import data into a DataSink (via a workflow) and\n * navigates them to the Workflows page. Named to avoid confusion with\n * ImportDataSinkDialog, which imports a DataSink config from JSON.\n */\n\nimport { type FC, memo } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Button,\n} from '@burdenoff/fe-libs/ui';\nimport { Upload, Workflow, ArrowRight } from 'lucide-react';\n\nexport interface ImportDataGuideDialogProps {\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** DataSink name for context */\n  dataSinkName?: string;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when the user chooses to go to the Workflows page */\n  onGoToWorkflows: () => void;\n}\n\nconst STEPS = [\n  'Go to the Workflows page and create a new workflow.',\n  'Add a source node to fetch your data, then a node that writes to this data sink.',\n  'Run the workflow — the imported data appears here in the data preview.',\n];\n\nexport const ImportDataGuideDialog: FC<ImportDataGuideDialogProps> = memo(function ImportDataGuideDialog({\n  isOpen,\n  dataSinkName,\n  onClose,\n  onGoToWorkflows,\n}) {\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className=\"sm:max-w-lg\">\n        <DialogHeader>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10\">\n              <Upload className=\"size-5 text-action-primary-bg\" />\n            </div>\n            <DialogTitle>Import data</DialogTitle>\n          </div>\n          <DialogDescription>\n            {dataSinkName ? `Populate “${dataSinkName}” with a workflow` : 'Populate this data sink with a workflow'}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"py-2 space-y-4\">\n          <p className=\"text-sm text-text-primary leading-relaxed\">\n            Data is imported into a data sink by building a <strong>workflow</strong>. A workflow fetches data from your\n            source (an API, database, file, or app) and writes it into this data sink so your dashboards can read it.\n          </p>\n\n          <ol className=\"space-y-3\">\n            {STEPS.map((step, index) => (\n              <li key={index} className=\"flex items-start gap-3\">\n                <span className=\"flex size-6 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-semibold text-text-primary\">\n                  {index + 1}\n                </span>\n                <p className=\"text-sm text-text-secondary leading-relaxed\">{step}</p>\n              </li>\n            ))}\n          </ol>\n        </div>\n\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={onClose}>\n            Cancel\n          </Button>\n          <Button onClick={onGoToWorkflows}>\n            <Workflow className=\"size-4\" />\n            Go to Workflows\n            <ArrowRight className=\"size-4\" />\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ImportDataGuideDialog;\n"],"mappings":";;;;;AA6BA,IAAM,IAAQ;CACZ;CACA;CACA;CACD,EAEY,IAAwD,EAAK,SAA+B,EACvG,WACA,iBACA,YACA,sBACC;AACD,QACE,kBAAC,GAAD;EAAQ,MAAM;EAAQ,eAAe,MAAS,CAAC,KAAQ,GAAS;YAC9D,kBAAC,GAAD;GAAe,WAAU;aAAzB;IACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAQ,WAAU,iCAAkC,CAAA;MAChD,CAAA,EACN,kBAAC,GAAD,EAAA,UAAa,eAAyB,CAAA,CAClC;QACN,kBAAC,GAAD,EAAA,UACG,IAAe,aAAa,EAAa,qBAAqB,2CAC7C,CAAA,CACP,EAAA,CAAA;IAEf,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAb;OAAyD;OACP,kBAAC,UAAD,EAAA,UAAQ,YAAiB,CAAA;;OAEvE;SAEJ,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD;OAAgB,WAAU;iBAA1B,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,IAAQ;QACJ,CAAA,EACP,kBAAC,KAAD;QAAG,WAAU;kBAA+C;QAAS,CAAA,CAClE;SALI,EAKJ,CACL;MACC,CAAA,CACD;;IAEN,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAQ,SAAQ;KAAU,SAAS;eAAS;KAEnC,CAAA,EACT,kBAAC,GAAD;KAAQ,SAAS;eAAjB;MACE,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;;MAE/B,kBAAC,GAAD,EAAY,WAAU,UAAW,CAAA;MAC1B;OACI,EAAA,CAAA;IACD;;EACT,CAAA;EAEX"}
+{"version":3,"file":"ImportDataGuideDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/ImportDataGuideDialog.tsx"],"sourcesContent":["/**\n * Import data into a DataSink. Offers two methods:\n *   1. Build a workflow — a repeatable, scheduled pipeline (the primary path).\n *   2. Upload a CSV file directly (parsed client-side, written to the sink) —\n *      the quickest path for one-off or small datasets.\n *\n * Named to avoid confusion with ImportDataSinkDialog, which imports a DataSink\n * *config* from JSON.\n */\n\nimport { type ChangeEvent, type FC, memo, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Button,\n} from '@burdenoff/fe-libs/ui';\nimport { Upload, Workflow, ArrowRight, FileUp, Loader2, AlertTriangle } from 'lucide-react';\n\nimport { parseCsv, type ParsedCsv } from '../../utils';\n\nexport interface ImportDataGuideDialogProps {\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** DataSink name for context */\n  dataSinkName?: string;\n  /** Whether the sink already holds data — a CSV import would replace it. */\n  hasExistingData?: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when the user chooses to go to the Workflows page */\n  onGoToWorkflows: () => void;\n  /**\n   * When provided, enables the direct CSV upload method. Receives the parsed\n   * rows and should persist them to the DataSink. Resolves true on success\n   * (the dialog then closes) or false on a handled failure.\n   */\n  onImportCsv?: (rows: Record<string, unknown>[]) => Promise<boolean>;\n}\n\nconst MAX_PREVIEW_COLUMNS = 6;\n\n/** Guard against reading a huge file fully into memory (~3-4x its size). */\nconst MAX_CSV_BYTES = 10_000_000; // 10 MB\n\n/** Cap rows so a single updateDataSink payload stays a sane size. */\nconst MAX_CSV_ROWS = 50_000;\n\nexport const ImportDataGuideDialog: FC<ImportDataGuideDialogProps> = memo(function ImportDataGuideDialog({\n  isOpen,\n  dataSinkName,\n  hasExistingData,\n  onClose,\n  onGoToWorkflows,\n  onImportCsv,\n}) {\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  // Monotonic token for the in-flight file read; bumped on every new selection\n  // or reset so a slow read that resolves late can detect it was superseded.\n  const readSeqRef = useRef(0);\n  const [fileName, setFileName] = useState<string | null>(null);\n  const [parsed, setParsed] = useState<ParsedCsv | null>(null);\n  const [parseError, setParseError] = useState<string | null>(null);\n  const [importError, setImportError] = useState<string | null>(null);\n  const [isImporting, setIsImporting] = useState(false);\n\n  const resetUploadState = useCallback(() => {\n    readSeqRef.current += 1; // invalidate any in-flight file read\n    setFileName(null);\n    setParsed(null);\n    setParseError(null);\n    setImportError(null);\n    setIsImporting(false);\n  }, []);\n\n  // Clear any prior selection whenever the dialog is (re)opened or closed.\n  useEffect(() => {\n    if (!isOpen) resetUploadState();\n  }, [isOpen, resetUploadState]);\n\n  const handleFileChange = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    // Reset the input so selecting the same file again re-triggers onChange.\n    event.target.value = '';\n    if (!file) return;\n\n    const seq = (readSeqRef.current += 1);\n    setParsed(null);\n    setParseError(null);\n    setImportError(null);\n    setFileName(file.name);\n\n    if (file.size > MAX_CSV_BYTES) {\n      setParseError('This CSV is larger than 10 MB. Import large datasets with a workflow instead.');\n      return;\n    }\n\n    try {\n      const text = await file.text();\n      if (seq !== readSeqRef.current) return; // superseded by a newer selection/close\n      const result = parseCsv(text);\n      if (result.rows.length > MAX_CSV_ROWS) {\n        setParseError(\n          `This CSV has ${result.rows.length.toLocaleString()} rows (limit ${MAX_CSV_ROWS.toLocaleString()}). Import large datasets with a workflow instead.`\n        );\n        return;\n      }\n      setParsed(result);\n    } catch (err) {\n      if (seq !== readSeqRef.current) return;\n      setParsed(null);\n      setParseError(err instanceof Error ? err.message : 'Failed to parse the CSV file.');\n    }\n  }, []);\n\n  const handleConfirmImport = useCallback(async () => {\n    if (!parsed || !onImportCsv) return;\n    setIsImporting(true);\n    setImportError(null);\n    try {\n      const ok = await onImportCsv(parsed.rows);\n      if (ok) {\n        onClose();\n      } else {\n        setImportError('Import failed. Please try again.');\n      }\n    } catch (err) {\n      setImportError(err instanceof Error ? err.message : 'Import failed. Please try again.');\n    } finally {\n      setIsImporting(false);\n    }\n  }, [parsed, onImportCsv, onClose]);\n\n  const openFilePicker = useCallback(() => fileInputRef.current?.click(), []);\n\n  const previewColumns = parsed?.columns.slice(0, MAX_PREVIEW_COLUMNS) ?? [];\n  const extraColumns = parsed ? parsed.columns.length - previewColumns.length : 0;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !isImporting && onClose()}>\n      <DialogContent className=\"sm:max-w-lg\">\n        <DialogHeader>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10\">\n              <Upload className=\"size-5 text-action-primary-bg\" />\n            </div>\n            <DialogTitle>Import data</DialogTitle>\n          </div>\n          <DialogDescription>\n            {dataSinkName ? `Add data to “${dataSinkName}”` : 'Add data to this data sink'}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"py-2 space-y-5\">\n          <section className=\"space-y-3\">\n            <div>\n              <h3 className=\"text-sm font-semibold text-text-primary\">Build a workflow</h3>\n              <p className=\"text-sm text-text-secondary leading-relaxed\">\n                The recommended way to keep this data sink up to date — build a repeatable, scheduled pipeline that\n                fetches from your source (an API, database, or app) and writes into this data sink on every run.\n              </p>\n            </div>\n            <Button variant=\"default\" onClick={onGoToWorkflows} disabled={isImporting} className=\"w-full\">\n              <Workflow className=\"size-4\" />\n              Go to Workflows\n              <ArrowRight className=\"size-4\" />\n            </Button>\n          </section>\n\n          {onImportCsv && (\n            <div className=\"flex items-center gap-3\">\n              <span className=\"h-px flex-1 bg-border-subtle\" />\n              <span className=\"text-xs font-medium uppercase tracking-wide text-text-tertiary\">Or</span>\n              <span className=\"h-px flex-1 bg-border-subtle\" />\n            </div>\n          )}\n\n          {onImportCsv && (\n            <section className=\"space-y-3\">\n              <div>\n                <h3 className=\"text-sm font-semibold text-text-primary\">Upload a CSV file</h3>\n                <p className=\"text-sm text-text-secondary leading-relaxed\">\n                  For a quick, one-off import, upload a spreadsheet export and it becomes available to your dashboards\n                  right away.\n                </p>\n              </div>\n\n              {hasExistingData && (\n                <div className=\"flex items-start gap-2 rounded-lg border border-status-warning-border bg-status-warning-bg px-3 py-2\">\n                  <AlertTriangle className=\"size-4 shrink-0 text-status-warning-text mt-0.5\" />\n                  <p className=\"text-sm text-status-warning-text\">\n                    This data sink already has data — importing a CSV will replace it.\n                  </p>\n                </div>\n              )}\n\n              <input\n                ref={fileInputRef}\n                type=\"file\"\n                accept=\".csv,text/csv\"\n                className=\"hidden\"\n                onChange={handleFileChange}\n                aria-label=\"Choose a CSV file to import\"\n              />\n\n              {!parsed && (\n                <button\n                  type=\"button\"\n                  onClick={openFilePicker}\n                  className=\"flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border-default bg-bg-sunken px-4 py-6 text-center transition-colors hover:border-action-primary-bg hover:bg-action-primary-bg/5\"\n                >\n                  <FileUp className=\"size-6 text-text-tertiary\" />\n                  <span className=\"text-sm font-medium text-text-primary\">\n                    {fileName ? 'Choose a different CSV file' : 'Choose a CSV file'}\n                  </span>\n                  <span className=\"text-xs text-text-tertiary\">The first row is used as column names.</span>\n                </button>\n              )}\n\n              {parseError && (\n                <div className=\"rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2\">\n                  <p className=\"text-sm text-status-error-text\">{parseError}</p>\n                </div>\n              )}\n\n              {parsed && (\n                <div className=\"space-y-3 rounded-lg border border-border-default bg-bg-sunken p-4\">\n                  <div className=\"flex items-center justify-between gap-3\">\n                    <span className=\"truncate text-sm font-medium text-text-primary\" title={fileName ?? undefined}>\n                      {fileName}\n                    </span>\n                    <button\n                      type=\"button\"\n                      onClick={openFilePicker}\n                      disabled={isImporting}\n                      className=\"shrink-0 text-xs font-medium text-action-primary-bg hover:underline disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline\"\n                    >\n                      Change file\n                    </button>\n                  </div>\n                  <p className=\"text-sm text-text-secondary\">\n                    Ready to import <strong className=\"text-text-primary\">{parsed.rows.length}</strong>{' '}\n                    {parsed.rows.length === 1 ? 'row' : 'rows'} ×{' '}\n                    <strong className=\"text-text-primary\">{parsed.columns.length}</strong>{' '}\n                    {parsed.columns.length === 1 ? 'column' : 'columns'}.\n                  </p>\n                  <div className=\"flex flex-wrap gap-1.5\">\n                    {previewColumns.map((col) => (\n                      <span\n                        key={col}\n                        className=\"rounded-full bg-bg-surface px-2 py-0.5 text-xs text-text-secondary border border-border-subtle\"\n                      >\n                        {col}\n                      </span>\n                    ))}\n                    {extraColumns > 0 && (\n                      <span className=\"rounded-full px-2 py-0.5 text-xs text-text-tertiary\">+{extraColumns} more</span>\n                    )}\n                  </div>\n\n                  {importError && <p className=\"text-sm text-status-error-text\">{importError}</p>}\n\n                  <Button onClick={handleConfirmImport} disabled={isImporting} className=\"w-full\">\n                    {isImporting ? (\n                      <>\n                        <Loader2 className=\"size-4 animate-spin\" />\n                        Importing…\n                      </>\n                    ) : (\n                      <>\n                        <Upload className=\"size-4\" />\n                        Import {parsed.rows.length} {parsed.rows.length === 1 ? 'row' : 'rows'}\n                      </>\n                    )}\n                  </Button>\n                </div>\n              )}\n            </section>\n          )}\n        </div>\n\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={onClose} disabled={isImporting}>\n            Cancel\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ImportDataGuideDialog;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/ActionConfigDialog.js

@@ -1,9 +1,11 @@
-import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { ChevronDown as ee, ChevronRight as te, Pencil as ne, Plus as re, Zap as ie } from "lucide-react";
-import { Button as ae, Checkbox as a, Dialog as oe, DialogContent as se, DialogDescription as ce, DialogFooter as le, DialogHeader as ue, DialogTitle as de, Input as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Spinner as fe, Textarea as pe } from "@burdenoff/fe-libs/ui";
+import { BIGCONSOLE_PERMISSIONS as e } from "../../../constants/permissions.js";
+import { memo as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { PermissionButton as ee } from "@burdenoff/fe-libs/shared/components";
+import { ChevronDown as te, ChevronRight as ne, Pencil as re, Plus as ie, Zap as ae } from "lucide-react";
+import { Button as oe, Checkbox as se, Dialog as ce, DialogContent as le, DialogDescription as ue, DialogFooter as de, DialogHeader as fe, DialogTitle as pe, Input as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Spinner as me, Textarea as he } from "@burdenoff/fe-libs/ui";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
-var me = [{
+var ge = [{
 	value: "WEBHOOK",
 	label: "Call a webhook / my API",
 	hint: "Sends an HTTP request to the URL below every time the button is clicked."
@@ -11,13 +13,13 @@ var me = [{
 	value: "EMIT",
 	label: "Just emit an event (advanced)",
 	hint: "Emits widget:<name>:clicked. Wire it up yourself in the Webhooks/Events section."
-}], he = [
+}], _e = [
 	"POST",
 	"GET",
 	"PUT",
 	"PATCH",
 	"DELETE"
-], ge = [
+], ve = [
 	{
 		value: "PRIMARY",
 		label: "Primary",
@@ -43,7 +45,7 @@ var me = [{
 		label: "Danger",
 		color: "var(--color-action-danger-bg)"
 	}
-], _e = [
+], ye = [
 	{
 		value: "",
 		label: "No icon"
@@ -120,19 +122,19 @@ var h = {
 	border: "1px solid var(--color-border)",
 	boxShadow: "var(--shadow-elevation-3)",
 	borderRadius: "var(--radius-button)"
-}, v = e(function({ isOpen: e, action: v, initialWebhook: y, isLoading: b = !1, saveError: ve, onClose: ye, onSave: be }) {
-	let x = !!v, S = r(null), C = r(!1), [w, T] = i(""), [E, D] = i(""), [O, k] = i(!1), [A, j] = i("PRIMARY"), [M, N] = i(""), [P, F] = i("WEBHOOK"), [I, L] = i(""), [R, z] = i("POST"), [B, V] = i(!1), [H, U] = i(!1), [xe, Se] = i(!1), [W, G] = i(!1), [K, q] = i("Confirm Action"), [J, Y] = i("Are you sure you want to proceed?"), [Ce, X] = i("Confirm"), [we, Z] = i("Cancel"), [Q, $] = i(null);
-	n(() => {
-		if (!e) return;
-		C.current = !1, L(""), z("POST"), v ? (T(v.label), D(v.name), k(!1), j(v.style), N(v.icon || ""), V(v.disabled), U(v.hidden), F("EMIT"), G(!!v.confirmation), v.confirmation ? (q(v.confirmation.title), Y(v.confirmation.message), X(v.confirmation.confirmLabel || "Confirm"), Z(v.confirmation.cancelLabel || "Cancel")) : (q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel"))) : (T(""), D(""), k(!1), j("PRIMARY"), N(""), F("WEBHOOK"), V(!1), U(!1), G(!1), q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel")), Se(!1), $(null);
-		let t = requestAnimationFrame(() => requestAnimationFrame(() => S.current?.focus()));
-		return () => cancelAnimationFrame(t);
-	}, [e, v]), n(() => {
-		!e || !y || C.current || (F("WEBHOOK"), L(y.url), z(y.method));
-	}, [e, y]);
-	let Te = t((e) => {
+}, v = t(function({ isOpen: t, action: v, initialWebhook: y, isLoading: b = !1, saveError: be, onClose: xe, onSave: Se }) {
+	let x = !!v, S = i(null), C = i(!1), [w, T] = a(""), [E, D] = a(""), [O, k] = a(!1), [A, j] = a("PRIMARY"), [M, N] = a(""), [P, F] = a("WEBHOOK"), [I, L] = a(""), [R, z] = a("POST"), [B, V] = a(!1), [H, U] = a(!1), [Ce, we] = a(!1), [W, G] = a(!1), [Te, K] = a("Confirm Action"), [Ee, q] = a("Are you sure you want to proceed?"), [J, Y] = a("Confirm"), [X, Z] = a("Cancel"), [Q, $] = a(null);
+	r(() => {
+		if (!t) return;
+		C.current = !1, L(""), z("POST"), v ? (T(v.label), D(v.name), k(!1), j(v.style), N(v.icon || ""), V(v.disabled), U(v.hidden), F("EMIT"), G(!!v.confirmation), v.confirmation ? (K(v.confirmation.title), q(v.confirmation.message), Y(v.confirmation.confirmLabel || "Confirm"), Z(v.confirmation.cancelLabel || "Cancel")) : (K("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel"))) : (T(""), D(""), k(!1), j("PRIMARY"), N(""), F("WEBHOOK"), V(!1), U(!1), G(!1), K("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel")), we(!1), $(null);
+		let e = requestAnimationFrame(() => requestAnimationFrame(() => S.current?.focus()));
+		return () => cancelAnimationFrame(e);
+	}, [t, v]), r(() => {
+		!t || !y || C.current || (F("WEBHOOK"), L(y.url), z(y.method));
+	}, [t, y]);
+	let De = n((e) => {
 		T(e), O || D(m(e)), Q && $(null);
-	}, [O, Q]), Ee = t((e) => {
+	}, [O, Q]), Oe = n((e) => {
 		e.preventDefault();
 		let t = w.trim();
 		if (!t) {
@@ -156,15 +158,15 @@ var h = {
 			}
 		}
 		let r = W ? {
-			title: K.trim() || "Confirm Action",
-			message: J.trim() || "Are you sure?",
-			confirmLabel: Ce.trim() || "Confirm",
-			cancelLabel: we.trim() || "Cancel"
+			title: Te.trim() || "Confirm Action",
+			message: Ee.trim() || "Are you sure?",
+			confirmLabel: J.trim() || "Confirm",
+			cancelLabel: X.trim() || "Cancel"
 		} : void 0, i = P === "WEBHOOK" ? {
 			url: I.trim(),
 			method: R
 		} : null;
-		be(x && v ? {
+		Se(x && v ? {
 			id: v.id,
 			name: n,
 			label: t,
@@ -196,23 +198,23 @@ var h = {
 		B,
 		H,
 		W,
-		K,
+		Te,
+		Ee,
 		J,
-		Ce,
-		we,
+		X,
 		x,
 		v,
-		be
-	]), De = (e) => ge.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Oe = me.find((e) => e.value === P);
-	return /* @__PURE__ */ f(oe, {
-		open: e,
-		onOpenChange: (e) => !e && !b && ye(),
-		children: /* @__PURE__ */ p(se, {
+		Se
+	]), ke = (e) => ve.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Ae = ge.find((e) => e.value === P);
+	return /* @__PURE__ */ f(ce, {
+		open: t,
+		onOpenChange: (e) => !e && !b && xe(),
+		children: /* @__PURE__ */ p(le, {
 			style: {
 				maxWidth: "500px",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ f(ue, {
+			children: [/* @__PURE__ */ f(fe, {
 				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
 				children: /* @__PURE__ */ p("div", {
 					style: {
@@ -231,12 +233,12 @@ var h = {
 							backgroundColor: "var(--color-action-primary-bg)",
 							boxShadow: "var(--shadow-elevation-2)"
 						},
-						children: f(x ? ne : ie, { style: {
+						children: f(x ? re : ae, { style: {
 							height: "var(--size-icon-lg)",
 							width: "var(--size-icon-lg)",
 							color: "var(--color-action-primary-text)"
 						} })
-					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(de, {
+					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(pe, {
 						style: {
 							fontSize: "var(--font-size-heading-h4)",
 							fontWeight: "var(--font-weight-bold)",
@@ -244,7 +246,7 @@ var h = {
 							margin: 0
 						},
 						children: x ? "Edit Button" : "Add Button"
-					}), /* @__PURE__ */ f(ce, {
+					}), /* @__PURE__ */ f(ue, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
@@ -254,7 +256,7 @@ var h = {
 					})] })]
 				})
 			}), /* @__PURE__ */ p("form", {
-				onSubmit: Ee,
+				onSubmit: Oe,
 				children: [/* @__PURE__ */ p("div", {
 					style: {
 						padding: "var(--space-pagePadding)",
@@ -262,7 +264,7 @@ var h = {
 						overflowY: "auto"
 					},
 					children: [
-						(Q || ve) && /* @__PURE__ */ f("div", {
+						(Q || be) && /* @__PURE__ */ f("div", {
 							style: {
 								padding: "var(--space-controlGap)",
 								backgroundColor: "var(--color-status-error-bgSubtle)",
@@ -276,7 +278,7 @@ var h = {
 									color: "var(--color-status-error-text)",
 									margin: 0
 								},
-								children: Q || ve
+								children: Q || be
 							})
 						}),
 						/* @__PURE__ */ p("div", {
@@ -292,7 +294,7 @@ var h = {
 								/* @__PURE__ */ f(o, {
 									ref: S,
 									value: w,
-									onChange: (e) => Te(e.target.value),
+									onChange: (e) => De(e.target.value),
 									placeholder: "e.g., Refresh Data, Export CSV",
 									disabled: b,
 									style: {
@@ -328,7 +330,7 @@ var h = {
 									children: /* @__PURE__ */ f(d, {})
 								}), /* @__PURE__ */ f(c, {
 									style: _,
-									children: ge.map((e) => /* @__PURE__ */ f(l, {
+									children: ve.map((e) => /* @__PURE__ */ f(l, {
 										value: e.value,
 										children: e.label
 									}, e.value))
@@ -351,7 +353,7 @@ var h = {
 										..._,
 										maxHeight: "200px"
 									},
-									children: _e.map((e) => /* @__PURE__ */ f(l, {
+									children: ye.map((e) => /* @__PURE__ */ f(l, {
 										value: e.value || "none",
 										children: e.label
 									}, e.value || "none"))
@@ -381,7 +383,7 @@ var h = {
 									fontSize: "var(--font-size-body-sm)",
 									fontWeight: "var(--font-weight-medium)",
 									borderRadius: "var(--radius-button)",
-									backgroundColor: De(A),
+									backgroundColor: ke(A),
 									color: "var(--color-action-primary-text)",
 									border: "none",
 									cursor: "default"
@@ -410,15 +412,15 @@ var h = {
 										children: /* @__PURE__ */ f(d, {})
 									}), /* @__PURE__ */ f(c, {
 										style: _,
-										children: me.map((e) => /* @__PURE__ */ f(l, {
+										children: ge.map((e) => /* @__PURE__ */ f(l, {
 											value: e.value,
 											children: e.label
 										}, e.value))
 									})]
 								}),
-								Oe && /* @__PURE__ */ f("p", {
+								Ae && /* @__PURE__ */ f("p", {
 									style: g,
-									children: Oe.hint
+									children: Ae.hint
 								})
 							]
 						}),
@@ -469,7 +471,7 @@ var h = {
 											children: /* @__PURE__ */ f(d, {})
 										}), /* @__PURE__ */ f(c, {
 											style: _,
-											children: he.map((e) => /* @__PURE__ */ f(l, {
+											children: _e.map((e) => /* @__PURE__ */ f(l, {
 												value: e,
 												children: e
 											}, e))
@@ -509,7 +511,7 @@ var h = {
 									cursor: "pointer",
 									marginBottom: "var(--space-formGap)"
 								},
-								children: [/* @__PURE__ */ f(a, {
+								children: [/* @__PURE__ */ f(se, {
 									checked: W,
 									onCheckedChange: (e) => G(e === !0),
 									disabled: b
@@ -540,8 +542,8 @@ var h = {
 										},
 										children: "Dialog Title"
 									}), /* @__PURE__ */ f(o, {
-										value: K,
-										onChange: (e) => q(e.target.value),
+										value: Te,
+										onChange: (e) => K(e.target.value),
 										disabled: b,
 										style: {
 											height: "var(--size-controlHeight-sm)",
@@ -557,9 +559,9 @@ var h = {
 											marginBottom: "var(--space-controlGap)"
 										},
 										children: "Message"
-									}), /* @__PURE__ */ f(pe, {
-										value: J,
-										onChange: (e) => Y(e.target.value),
+									}), /* @__PURE__ */ f(he, {
+										value: Ee,
+										onChange: (e) => q(e.target.value),
 										rows: 2,
 										disabled: b,
 										style: {
@@ -583,8 +585,8 @@ var h = {
 											},
 											children: "Confirm Button"
 										}), /* @__PURE__ */ f(o, {
-											value: Ce,
-											onChange: (e) => X(e.target.value),
+											value: J,
+											onChange: (e) => Y(e.target.value),
 											disabled: b,
 											style: {
 												height: "var(--size-controlHeight-sm)",
@@ -600,7 +602,7 @@ var h = {
 											},
 											children: "Cancel Button"
 										}), /* @__PURE__ */ f(o, {
-											value: we,
+											value: X,
 											onChange: (e) => Z(e.target.value),
 											disabled: b,
 											style: {
@@ -619,7 +621,7 @@ var h = {
 							},
 							children: [/* @__PURE__ */ p("button", {
 								type: "button",
-								onClick: () => Se((e) => !e),
+								onClick: () => we((e) => !e),
 								style: {
 									display: "flex",
 									alignItems: "center",
@@ -632,11 +634,11 @@ var h = {
 									fontWeight: "var(--font-weight-semibold)",
 									color: "var(--color-text-primary)"
 								},
-								children: [f(xe ? ee : te, { style: {
+								children: [f(Ce ? te : ne, { style: {
 									height: "14px",
 									width: "14px"
 								} }), "Advanced"]
-							}), xe && /* @__PURE__ */ p("div", {
+							}), Ce && /* @__PURE__ */ p("div", {
 								style: {
 									marginTop: "var(--space-formGap)",
 									display: "flex",
@@ -688,7 +690,7 @@ var h = {
 											gap: "var(--space-controlGap)",
 											cursor: "pointer"
 										},
-										children: [/* @__PURE__ */ f(a, {
+										children: [/* @__PURE__ */ f(se, {
 											checked: B,
 											onCheckedChange: (e) => V(e === !0),
 											disabled: b
@@ -706,7 +708,7 @@ var h = {
 											gap: "var(--space-controlGap)",
 											cursor: "pointer"
 										},
-										children: [/* @__PURE__ */ f(a, {
+										children: [/* @__PURE__ */ f(se, {
 											checked: H,
 											onCheckedChange: (e) => U(e === !0),
 											disabled: b
@@ -722,7 +724,7 @@ var h = {
 							})]
 						})
 					]
-				}), /* @__PURE__ */ p(le, {
+				}), /* @__PURE__ */ p(de, {
 					style: {
 						padding: "var(--space-formGap) var(--space-pagePadding)",
 						borderTop: "1px solid var(--color-border)",
@@ -731,40 +733,44 @@ var h = {
 						justifyContent: "flex-end",
 						gap: "var(--space-controlGap)"
 					},
-					children: [/* @__PURE__ */ f(ae, {
+					children: [/* @__PURE__ */ f(oe, {
 						type: "button",
 						variant: "outline",
-						onClick: ye,
+						onClick: xe,
 						disabled: b,
 						style: { height: "var(--size-controlHeight-md)" },
 						children: "Cancel"
-					}), /* @__PURE__ */ f(ae, {
-						type: "submit",
-						disabled: b || !w.trim(),
-						style: {
-							height: "var(--size-controlHeight-md)",
-							backgroundColor: "var(--color-action-primary-bg)"
-						},
-						children: b ? /* @__PURE__ */ p("span", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)"
-							},
-							children: [/* @__PURE__ */ f(fe, { style: {
-								height: "var(--size-icon-sm)",
-								width: "var(--size-icon-sm)"
-							} }), "Saving..."]
-						}) : /* @__PURE__ */ p("span", {
+					}), /* @__PURE__ */ f(ee, {
+						permission: x ? e.WIDGET_ACTION_UPDATE : e.WIDGET_ACTION_CREATE,
+						deniedBehavior: "disable",
+						children: /* @__PURE__ */ f(oe, {
+							type: "submit",
+							disabled: b || !w.trim(),
 							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)"
+								height: "var(--size-controlHeight-md)",
+								backgroundColor: "var(--color-action-primary-bg)"
 							},
-							children: [f(x ? ne : re, { style: {
-								height: "var(--size-icon-sm)",
-								width: "var(--size-icon-sm)"
-							} }), x ? "Update Button" : "Add Button"]
+							children: b ? /* @__PURE__ */ p("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [/* @__PURE__ */ f(me, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), "Saving..."]
+							}) : /* @__PURE__ */ p("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [f(x ? re : ie, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), x ? "Update Button" : "Add Button"]
+							})
 						})
 					})]
 				})]