@burdenoff/microfe-bigconsole 2026.804.2 → 2026.805.2

package/dist/bigconsole/pages/DataSinkBuilderPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/DataSinkBuilderPage.tsx"],"sourcesContent":["/**\n * DataSink Builder Page\n *\n * Simplified page for creating and editing DataSinks.\n * DataSinks are now standalone - workflows push data to them via unique keys.\n * Required fields: name, key\n */\n\nimport { memo, useState, useMemo, useEffect, useCallback } from 'react';\nimport { useParams } from 'react-router';\nimport { useAppNavigate } from '../contexts';\nimport { isNative, nativeCopyText, nativeToast } from '../../utils/nativeBridge';\nimport { useDataSinkOperations } from '../hooks/useDataSinkOperations';\nimport { CacheTTLSelector } from '../components/datasink/CacheTTLSelector';\nimport { RefreshTypeSelector } from '../components/datasink/RefreshTypeSelector';\nimport type { CreateDataSinkInput, UpdateDataSinkInput, DataSinkRefreshType } from '../types';\n\n// fe-libs UI components\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Textarea } from '@burdenoff/fe-libs/ui';\nimport { Label } from '@burdenoff/fe-libs/ui';\nimport { Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport { GlassCard, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\n\n// Lucide icons\nimport { ArrowLeft, Save, Loader2, AlertCircle, Database, Settings, Eye, Copy, Check } from 'lucide-react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface RefreshConfig {\n  type: 'manual' | 'scheduled';\n  schedule?: {\n    cron: string;\n    timezone: string;\n  };\n}\n\ninterface FormState {\n  name: string;\n  key: string;\n  description: string;\n  ttl: number;\n  refresh: RefreshConfig;\n  data: string; // JSON string for data payload\n}\n\ninterface FormErrors {\n  name?: string;\n  key?: string;\n  data?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Generate a key from name (slug format)\n */\nfunction generateKey(name: string): string {\n  return name\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '_')\n    .replace(/^_+|_+$/g, '')\n    .substring(0, 64);\n}\n\n/**\n * Validate form data\n */\nfunction validateForm(form: FormState): FormErrors {\n  const errors: FormErrors = {};\n\n  if (!form.name.trim()) {\n    errors.name = 'Name is required';\n  } else if (form.name.length < 2) {\n    errors.name = 'Name must be at least 2 characters';\n  } else if (form.name.length > 100) {\n    errors.name = 'Name must be less than 100 characters';\n  }\n\n  if (!form.key.trim()) {\n    errors.key = 'Key is required';\n  } else if (!/^[a-z0-9_]+$/.test(form.key)) {\n    errors.key = 'Key can only contain lowercase letters, numbers, and underscores';\n  } else if (form.key.length > 64) {\n    errors.key = 'Key must be less than 64 characters';\n  }\n\n  // Validate JSON data if provided\n  if (form.data && form.data.trim()) {\n    try {\n      JSON.parse(form.data);\n    } catch {\n      errors.data = 'Invalid JSON format';\n    }\n  }\n\n  return errors;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkBuilderPage = memo(function DataSinkBuilderPage() {\n  const { dataSinkId } = useParams<{ dataSinkId?: string }>();\n  const navigate = useAppNavigate();\n\n  const isEdit = dataSinkId !== 'new' && !!dataSinkId;\n\n  // Form state\n  const [form, setForm] = useState<FormState>({\n    name: '',\n    key: '',\n    description: '',\n    ttl: 300, // 5 minutes default\n    refresh: {\n      type: 'manual',\n    },\n    data: '{}', // Default empty JSON object\n  });\n  const [errors, setErrors] = useState<FormErrors>({});\n  const [keyManuallyEdited, setKeyManuallyEdited] = useState(false);\n  const [isSaving, setIsSaving] = useState(false);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [keyCopied, setKeyCopied] = useState(false);\n\n  // Data preview state\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false);\n  const [previewData, setPreviewData] = useState<unknown[] | null>(null);\n  const [previewError, setPreviewError] = useState<string | null>(null);\n\n  // Operations\n  const { loading, error, dataSinks, fetchDataSink, createDataSink, updateDataSink, getDataSinkData } =\n    useDataSinkOperations({\n      skipFetch: true,\n    });\n\n  // Get existing data sink if editing\n  const existingDataSink = isEdit ? dataSinks.find((ds) => ds.id === dataSinkId) : null;\n\n  // Load existing data sink for editing\n  useEffect(() => {\n    if (isEdit && dataSinkId && !existingDataSink) {\n      fetchDataSink(dataSinkId);\n    }\n  }, [isEdit, dataSinkId, existingDataSink, fetchDataSink]);\n\n  // Track if form has been initialized\n  const [formInitialized, setFormInitialized] = useState(false);\n\n  // Populate form with existing data when editing (only once)\n  useEffect(() => {\n    if (existingDataSink && !formInitialized) {\n      // Format existing data as pretty JSON string\n      let dataString = '';\n      if (existingDataSink.data) {\n        try {\n          // Check if data is already a string (JSON string from API)\n          if (typeof existingDataSink.data === 'string') {\n            // Parse and re-stringify to ensure proper formatting\n            const parsed = JSON.parse(existingDataSink.data);\n            dataString = JSON.stringify(parsed, null, 2);\n          } else {\n            // It's an object, just stringify it\n            dataString = JSON.stringify(existingDataSink.data, null, 2);\n          }\n        } catch {\n          // If parsing fails, use as-is if string, otherwise empty\n          dataString = typeof existingDataSink.data === 'string' ? existingDataSink.data : '';\n        }\n      }\n\n      setForm({\n        name: existingDataSink.name || '',\n        key: existingDataSink.key || '',\n        description: existingDataSink.description || '',\n        ttl: existingDataSink.ttl || 300,\n        refresh: existingDataSink.refresh\n          ? {\n              type: existingDataSink.refresh.type === 'scheduled' ? 'scheduled' : 'manual',\n              schedule: existingDataSink.refresh.schedule\n                ? {\n                    cron: existingDataSink.refresh.schedule.cron,\n                    timezone: existingDataSink.refresh.schedule.timezone,\n                  }\n                : undefined,\n            }\n          : { type: 'manual' },\n        data: dataString,\n      });\n      setKeyManuallyEdited(true); // Don't auto-generate key when editing\n      setFormInitialized(true); // Mark as initialized\n      setErrors({}); // Clear any errors\n    }\n  }, [existingDataSink, formInitialized]);\n\n  // Auto-generate key from name\n  const handleNameChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const name = e.target.value;\n      setForm((prev) => ({\n        ...prev,\n        name,\n        key: keyManuallyEdited ? prev.key : generateKey(name),\n      }));\n      setErrors((prev) => ({ ...prev, name: undefined }));\n    },\n    [keyManuallyEdited]\n  );\n\n  // Handle key change\n  const handleKeyChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const key = e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '');\n    setForm((prev) => ({ ...prev, key }));\n    setKeyManuallyEdited(true);\n    setErrors((prev) => ({ ...prev, key: undefined }));\n  }, []);\n\n  // Handle description change\n  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setForm((prev) => ({ ...prev, description: e.target.value }));\n  }, []);\n\n  // Handle TTL change\n  const handleTTLChange = useCallback((ttl: number | null) => {\n    setForm((prev) => ({ ...prev, ttl: ttl || 0 }));\n  }, []);\n\n  // Handle refresh config change\n  const handleRefreshChange = useCallback((config: RefreshConfig) => {\n    setForm((prev) => ({ ...prev, refresh: config }));\n  }, []);\n\n  // Handle data change\n  const handleDataChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setForm((prev) => ({ ...prev, data: e.target.value }));\n    setErrors((prev) => ({ ...prev, data: undefined }));\n  }, []);\n\n  // Format JSON data\n  const handleFormatData = useCallback(() => {\n    try {\n      const parsed = JSON.parse(form.data);\n      setForm((prev) => ({ ...prev, data: JSON.stringify(parsed, null, 2) }));\n      setErrors((prev) => ({ ...prev, data: undefined }));\n    } catch {\n      setErrors((prev) => ({ ...prev, data: 'Invalid JSON format' }));\n    }\n  }, [form.data]);\n\n  // Copy key to clipboard\n  const handleCopyKey = useCallback(async () => {\n    if (form.key) {\n      await nativeCopyText(form.key);\n      setKeyCopied(true);\n      if (isNative()) void nativeToast('Key copied');\n      setTimeout(() => setKeyCopied(false), 2000);\n    }\n  }, [form.key]);\n\n  // Handle back navigation\n  const handleBack = useCallback(() => {\n    navigate('/datasinks');\n  }, [navigate]);\n\n  // Load data preview\n  const handleShowData = useCallback(async () => {\n    if (!isEdit || !existingDataSink) return;\n\n    setIsLoadingPreview(true);\n    setPreviewError(null);\n\n    try {\n      const result = await getDataSinkData({ key: existingDataSink.key });\n      if (result?.raw) {\n        // Get first 20 items if it's an array, otherwise wrap in array\n        const data = Array.isArray(result.raw) ? result.raw.slice(0, 20) : [result.raw];\n        setPreviewData(data);\n      } else {\n        setPreviewData([]);\n      }\n    } catch (err) {\n      setPreviewError(err instanceof Error ? err.message : 'Failed to load data');\n    } finally {\n      setIsLoadingPreview(false);\n    }\n  }, [isEdit, existingDataSink, getDataSinkData]);\n\n  // Handle form submission\n  const handleSubmit = useCallback(\n    async (e: React.FormEvent) => {\n      e.preventDefault();\n      setSubmitError(null);\n\n      // Validate form\n      const validationErrors = validateForm(form);\n      if (Object.keys(validationErrors).length > 0) {\n        setErrors(validationErrors);\n        return;\n      }\n\n      setIsSaving(true);\n      try {\n        // Parse data JSON\n        let parsedData: Record<string, unknown> = {};\n        if (form.data && form.data.trim()) {\n          try {\n            parsedData = JSON.parse(form.data) as Record<string, unknown>;\n          } catch {\n            setErrors((prev) => ({ ...prev, data: 'Invalid JSON format' }));\n            setIsSaving(false);\n            return;\n          }\n        }\n\n        if (isEdit && existingDataSink) {\n          // Update existing\n          const input: UpdateDataSinkInput = {\n            id: existingDataSink.id,\n            version: existingDataSink.version,\n            name: form.name,\n            description: form.description || undefined,\n            ttl: form.ttl,\n            refresh: {\n              type: form.refresh.type as DataSinkRefreshType,\n              schedule: form.refresh.schedule,\n            },\n            data: parsedData, // Include data in update\n          };\n          const result = await updateDataSink(input);\n          if (!result) {\n            throw new Error('Failed to update DataSink');\n          }\n        } else {\n          // Create new - simplified flow (standalone DataSinks)\n          const input: CreateDataSinkInput = {\n            key: form.key,\n            name: form.name,\n            description: form.description || undefined,\n            ttl: form.ttl,\n            refresh: {\n              type: form.refresh.type as DataSinkRefreshType,\n              schedule: form.refresh.schedule,\n            },\n            data: parsedData, // Include data in create\n          };\n          const result = await createDataSink(input);\n          if (!result) {\n            throw new Error('Failed to create DataSink');\n          }\n        }\n        navigate('/datasinks');\n      } catch (err) {\n        setSubmitError(err instanceof Error ? err.message : 'Failed to save DataSink');\n      } finally {\n        setIsSaving(false);\n      }\n    },\n    [form, isEdit, existingDataSink, createDataSink, updateDataSink, navigate]\n  );\n\n  // Check if form is valid\n  const isFormValid = useMemo(() => {\n    const nameValid = form.name.trim().length >= 2;\n    const keyValid = form.key.trim().length > 0;\n\n    // Check JSON validity if data is provided\n    let dataValid = true;\n    if (form.data && form.data.trim()) {\n      try {\n        JSON.parse(form.data);\n      } catch {\n        dataValid = false;\n      }\n    }\n\n    return nameValid && keyValid && dataValid;\n  }, [form.name, form.key, form.data]);\n\n  // Loading state\n  if (loading && isEdit) {\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <Loader2 className=\"w-8 h-8 text-text-secondary animate-spin\" />\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px] p-card-padding\">\n        <div className=\"text-center\">\n          <AlertCircle className=\"w-12 h-12 text-status-error-text mx-auto mb-4\" />\n          <p className=\"text-status-error-text text-body-sm font-medium mb-2\">Failed to load DataSink</p>\n          <p className=\"text-text-tertiary text-body-xs\">{error.message}</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-screen bg-bg-canvas\">\n      <div className=\"max-w-3xl mx-auto p-card-padding\">\n        {/* Header */}\n        <div className=\"mb-6\">\n          <Button onClick={handleBack} variant=\"ghost\" size=\"sm\" className=\"mb-4\">\n            <ArrowLeft className=\"w-4 h-4 mr-2\" />\n            Back to DataSinks\n          </Button>\n          <h1 className=\"text-heading-h1 font-bold text-text-primary\">\n            {isEdit ? 'Edit DataSink' : 'Create DataSink'}\n          </h1>\n          <p className=\"text-body-sm text-text-secondary mt-1\">\n            {isEdit\n              ? 'Update the DataSink configuration.'\n              : 'Create a new DataSink to store and cache data. Use the unique key to connect workflows.'}\n          </p>\n        </div>\n\n        {/* Error Alert */}\n        {submitError && (\n          <div className=\"mb-6 p-4 bg-status-error-bg/10 border border-status-error-border/30 rounded-lg flex items-start gap-3\">\n            <AlertCircle className=\"w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-status-error-text\">Failed to save DataSink</p>\n              <p className=\"text-xs text-status-error-text/80 mt-1\">{submitError}</p>\n            </div>\n          </div>\n        )}\n\n        <PagePurpose className=\"mb-6\">\n          A data sink is the named, structured store your dashboards read from. Give it a unique key, configure how long\n          data is cached and how it refreshes, then point a workflow at that key to push data in. Get the basics right\n          here and everything downstream connects to it.\n        </PagePurpose>\n\n        {/* Form */}\n        <form onSubmit={handleSubmit} className=\"space-y-6\">\n          {/* Basic Information — primary emphasis zone */}\n          <GlassCard treatment=\"glass\" glow>\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                  <Database className=\"w-4 h-4 text-action-primary-bg\" />\n                </div>\n                <div>\n                  <CardTitle className=\"text-base\">Basic Information</CardTitle>\n                  <p className=\"text-xs text-text-secondary mt-0.5\">Essential details for your DataSink</p>\n                </div>\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-5\">\n              {/* Name field */}\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"name\">\n                  Name <span className=\"text-status-error-text\">*</span>\n                </Label>\n                <Input\n                  id=\"name\"\n                  type=\"text\"\n                  value={form.name}\n                  onChange={handleNameChange}\n                  placeholder=\"e.g., Sales Metrics\"\n                  className={errors.name ? 'border-status-error-border' : ''}\n                />\n                {errors.name && <p className=\"text-body-xs text-status-error-text\">{errors.name}</p>}\n              </div>\n\n              {/* Key field */}\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"key\">\n                  Unique Key <span className=\"text-status-error-text\">*</span>\n                </Label>\n                <div className=\"flex gap-2\">\n                  <Input\n                    id=\"key\"\n                    type=\"text\"\n                    value={form.key}\n                    onChange={handleKeyChange}\n                    placeholder=\"sales_metrics\"\n                    disabled={isEdit}\n                    className={`font-mono flex-1 ${errors.key ? 'border-status-error-border' : ''}`}\n                  />\n                  {form.key && (\n                    <Button type=\"button\" onClick={handleCopyKey} variant=\"outline\" size=\"sm\" className=\"px-3\">\n                      {keyCopied ? (\n                        <Check className=\"w-4 h-4 text-status-success-text\" />\n                      ) : (\n                        <Copy className=\"w-4 h-4\" />\n                      )}\n                    </Button>\n                  )}\n                </div>\n                {errors.key && <p className=\"text-body-xs text-status-error-text\">{errors.key}</p>}\n                <p className=\"text-body-xs text-text-tertiary\">\n                  {isEdit\n                    ? 'Key cannot be changed. Use this key in your workflows to push data.'\n                    : 'Auto-generated from name. This key will be used by workflows to push data.'}\n                </p>\n              </div>\n\n              {/* Description field */}\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"description\">Description</Label>\n                <Textarea\n                  id=\"description\"\n                  value={form.description}\n                  onChange={handleDescriptionChange}\n                  placeholder=\"Describe what data this sink stores...\"\n                  rows={2}\n                  className=\"resize-none\"\n                />\n              </div>\n            </CardContent>\n          </GlassCard>\n\n          {/* Configuration */}\n          <Card>\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                  <Settings className=\"w-4 h-4 text-action-primary-bg\" />\n                </div>\n                <div>\n                  <CardTitle className=\"text-base\">Configuration</CardTitle>\n                  <p className=\"text-xs text-text-secondary mt-0.5\">Cache and refresh settings</p>\n                </div>\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-5\">\n              {/* Cache TTL */}\n              <div className=\"space-y-2\">\n                <Label>Cache Duration</Label>\n                <CacheTTLSelector value={form.ttl} onChange={handleTTLChange} />\n                <p className=\"text-body-xs text-text-tertiary\">\n                  How long cached data remains valid before requiring refresh.\n                </p>\n              </div>\n\n              {/* Refresh Type */}\n              <RefreshTypeSelector value={form.refresh} onChange={handleRefreshChange} />\n            </CardContent>\n          </Card>\n\n          {/* Data Payload */}\n          <Card>\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                    <Database className=\"w-4 h-4 text-action-primary-bg\" />\n                  </div>\n                  <div>\n                    <CardTitle className=\"text-base\">Data Payload</CardTitle>\n                    <p className=\"text-xs text-text-secondary mt-0.5\">\n                      {isEdit ? 'Edit the JSON data stored in this DataSink' : 'Optional initial data (JSON format)'}\n                    </p>\n                  </div>\n                </div>\n                <Button type=\"button\" onClick={handleFormatData} variant=\"outline\" size=\"sm\">\n                  Format JSON\n                </Button>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <div className=\"space-y-2\">\n                <Textarea\n                  value={form.data}\n                  onChange={handleDataChange}\n                  placeholder='{\"key\": \"value\"}'\n                  rows={10}\n                  className={`font-mono text-xs resize-y ${errors.data ? 'border-status-error-border' : ''}`}\n                />\n                {errors.data && <p className=\"text-body-xs text-status-error-text\">{errors.data}</p>}\n                <p className=\"text-body-xs text-text-tertiary\">\n                  Enter valid JSON data. This data will be stored and can be accessed by widgets via parsers.\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Data Preview - Only show for existing DataSinks */}\n          {isEdit && existingDataSink && (\n            <Card>\n              <CardHeader className=\"pb-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                      <Eye className=\"w-4 h-4 text-action-primary-bg\" />\n                    </div>\n                    <div>\n                      <CardTitle className=\"text-base\">Data Preview</CardTitle>\n                      <p className=\"text-xs text-text-secondary mt-0.5\">Preview the first 20 records</p>\n                    </div>\n                  </div>\n                  <Button\n                    type=\"button\"\n                    onClick={handleShowData}\n                    variant=\"outline\"\n                    size=\"sm\"\n                    disabled={isLoadingPreview}\n                  >\n                    {isLoadingPreview ? (\n                      <>\n                        <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                        Loading...\n                      </>\n                    ) : (\n                      <>\n                        <Eye className=\"w-4 h-4 mr-2\" />\n                        Show Data\n                      </>\n                    )}\n                  </Button>\n                </div>\n              </CardHeader>\n              {(previewData || previewError) && (\n                <CardContent>\n                  {previewError ? (\n                    <div className=\"p-4 bg-status-error-bg/10 border border-status-error-border/30 rounded-md\">\n                      <p className=\"text-sm text-status-error-text\">{previewError}</p>\n                    </div>\n                  ) : previewData && previewData.length > 0 ? (\n                    <pre className=\"p-4 bg-bg-sunken rounded-md overflow-auto max-h-[300px] text-xs font-mono\">\n                      {JSON.stringify(previewData, null, 2)}\n                    </pre>\n                  ) : (\n                    <IllustratedEmptyState\n                      illustration=\"empty-generic\"\n                      title=\"No data available yet\"\n                      description=\"Connect a workflow to this sink's key to start pushing data.\"\n                    />\n                  )}\n                </CardContent>\n              )}\n            </Card>\n          )}\n\n          {/* Submit */}\n          <div className=\"flex items-center justify-end gap-4 pt-4\">\n            <Button type=\"button\" onClick={handleBack} variant=\"secondary\">\n              Cancel\n            </Button>\n            <Button type=\"submit\" disabled={!isFormValid || isSaving} variant=\"default\">\n              {isSaving ? (\n                <>\n                  <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                  Saving...\n                </>\n              ) : (\n                <>\n                  <Save className=\"w-4 h-4 mr-2\" />\n                  {isEdit ? 'Save Changes' : 'Create DataSink'}\n                </>\n              )}\n            </Button>\n          </div>\n        </form>\n\n        {/* Info Box for New DataSinks */}\n        {!isEdit && (\n          <div className=\"mt-6 p-4 bg-bg-sunken rounded-lg border border-border-default\">\n            <h3 className=\"text-sm font-medium text-text-primary mb-2\">What&apos;s Next?</h3>\n            <ol className=\"list-decimal list-inside text-xs text-text-secondary space-y-1\">\n              <li>Create this DataSink to get your unique key</li>\n              <li>\n                Go to <strong>Workflows</strong> and create a FluidGrids workflow\n              </li>\n              <li>Use the unique key in your workflow to push data to this DataSink</li>\n              <li>\n                Create <strong>Parsers</strong> to transform the data using JQ or JSONata\n              </li>\n            </ol>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkBuilderPage;\n"],"mappings":"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"}
+{"version":3,"file":"DataSinkBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/DataSinkBuilderPage.tsx"],"sourcesContent":["/**\n * DataSink Builder Page\n *\n * Simplified page for creating and editing DataSinks.\n * DataSinks are now standalone - workflows push data to them via unique keys.\n * Required fields: name, key\n */\n\nimport { memo, useState, useMemo, useEffect, useCallback } from 'react';\nimport { useParams } from 'react-router';\nimport { useAppNavigate } from '../contexts';\nimport { isNative, nativeCopyText, nativeToast } from '../../utils/nativeBridge';\nimport { useDataSinkOperations } from '../hooks/useDataSinkOperations';\nimport { CacheTTLSelector } from '../components/datasink/CacheTTLSelector';\nimport { RefreshTypeSelector } from '../components/datasink/RefreshTypeSelector';\nimport type { CreateDataSinkInput, UpdateDataSinkInput, DataSinkRefreshType } from '../types';\n\n// fe-libs UI components\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Textarea } from '@burdenoff/fe-libs/ui';\nimport { Label } from '@burdenoff/fe-libs/ui';\nimport { Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport { GlassCard, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\n\n// Lucide icons\nimport { ArrowLeft, Save, Loader2, AlertCircle, Database, Settings, Eye, Copy, Check } from 'lucide-react';\n\n// RBAC\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { AccessDenied, PermissionButton } from '@burdenoff/fe-libs/shared/components';\nimport { BIGCONSOLE_PERMISSIONS } from '../../constants/permissions';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface RefreshConfig {\n  type: 'manual' | 'scheduled';\n  schedule?: {\n    cron: string;\n    timezone: string;\n  };\n}\n\ninterface FormState {\n  name: string;\n  key: string;\n  description: string;\n  ttl: number;\n  refresh: RefreshConfig;\n  data: string; // JSON string for data payload\n}\n\ninterface FormErrors {\n  name?: string;\n  key?: string;\n  data?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Generate a key from name (slug format)\n */\nfunction generateKey(name: string): string {\n  return name\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '_')\n    .replace(/^_+|_+$/g, '')\n    .substring(0, 64);\n}\n\n/**\n * Validate form data\n */\nfunction validateForm(form: FormState): FormErrors {\n  const errors: FormErrors = {};\n\n  if (!form.name.trim()) {\n    errors.name = 'Name is required';\n  } else if (form.name.length < 2) {\n    errors.name = 'Name must be at least 2 characters';\n  } else if (form.name.length > 100) {\n    errors.name = 'Name must be less than 100 characters';\n  }\n\n  if (!form.key.trim()) {\n    errors.key = 'Key is required';\n  } else if (!/^[a-z0-9_]+$/.test(form.key)) {\n    errors.key = 'Key can only contain lowercase letters, numbers, and underscores';\n  } else if (form.key.length > 64) {\n    errors.key = 'Key must be less than 64 characters';\n  }\n\n  // Validate JSON data if provided\n  if (form.data && form.data.trim()) {\n    try {\n      JSON.parse(form.data);\n    } catch {\n      errors.data = 'Invalid JSON format';\n    }\n  }\n\n  return errors;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkBuilderPage = memo(function DataSinkBuilderPage() {\n  const { dataSinkId } = useParams<{ dataSinkId?: string }>();\n  const navigate = useAppNavigate();\n\n  const isEdit = dataSinkId !== 'new' && !!dataSinkId;\n\n  // RBAC — Save requires UPDATE when editing an existing sink, CREATE when\n  // creating a new one. In edit mode the page also requires READ to be viewed.\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(BIGCONSOLE_PERMISSIONS.DATASINK_READ);\n  const savePermission = isEdit ? BIGCONSOLE_PERMISSIONS.DATASINK_UPDATE : BIGCONSOLE_PERMISSIONS.DATASINK_CREATE;\n\n  // Form state\n  const [form, setForm] = useState<FormState>({\n    name: '',\n    key: '',\n    description: '',\n    ttl: 300, // 5 minutes default\n    refresh: {\n      type: 'manual',\n    },\n    data: '{}', // Default empty JSON object\n  });\n  const [errors, setErrors] = useState<FormErrors>({});\n  const [keyManuallyEdited, setKeyManuallyEdited] = useState(false);\n  const [isSaving, setIsSaving] = useState(false);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [keyCopied, setKeyCopied] = useState(false);\n\n  // Data preview state\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false);\n  const [previewData, setPreviewData] = useState<unknown[] | null>(null);\n  const [previewError, setPreviewError] = useState<string | null>(null);\n\n  // Operations\n  const { loading, error, dataSinks, fetchDataSink, createDataSink, updateDataSink, getDataSinkData } =\n    useDataSinkOperations({\n      skipFetch: true,\n    });\n\n  // Get existing data sink if editing\n  const existingDataSink = isEdit ? dataSinks.find((ds) => ds.id === dataSinkId) : null;\n\n  // Load existing data sink for editing\n  useEffect(() => {\n    if (isEdit && dataSinkId && !existingDataSink) {\n      fetchDataSink(dataSinkId);\n    }\n  }, [isEdit, dataSinkId, existingDataSink, fetchDataSink]);\n\n  // Track if form has been initialized\n  const [formInitialized, setFormInitialized] = useState(false);\n\n  // Populate form with existing data when editing (only once)\n  useEffect(() => {\n    if (existingDataSink && !formInitialized) {\n      // Format existing data as pretty JSON string\n      let dataString = '';\n      if (existingDataSink.data) {\n        try {\n          // Check if data is already a string (JSON string from API)\n          if (typeof existingDataSink.data === 'string') {\n            // Parse and re-stringify to ensure proper formatting\n            const parsed = JSON.parse(existingDataSink.data);\n            dataString = JSON.stringify(parsed, null, 2);\n          } else {\n            // It's an object, just stringify it\n            dataString = JSON.stringify(existingDataSink.data, null, 2);\n          }\n        } catch {\n          // If parsing fails, use as-is if string, otherwise empty\n          dataString = typeof existingDataSink.data === 'string' ? existingDataSink.data : '';\n        }\n      }\n\n      setForm({\n        name: existingDataSink.name || '',\n        key: existingDataSink.key || '',\n        description: existingDataSink.description || '',\n        ttl: existingDataSink.ttl || 300,\n        refresh: existingDataSink.refresh\n          ? {\n              type: existingDataSink.refresh.type === 'scheduled' ? 'scheduled' : 'manual',\n              schedule: existingDataSink.refresh.schedule\n                ? {\n                    cron: existingDataSink.refresh.schedule.cron,\n                    timezone: existingDataSink.refresh.schedule.timezone,\n                  }\n                : undefined,\n            }\n          : { type: 'manual' },\n        data: dataString,\n      });\n      setKeyManuallyEdited(true); // Don't auto-generate key when editing\n      setFormInitialized(true); // Mark as initialized\n      setErrors({}); // Clear any errors\n    }\n  }, [existingDataSink, formInitialized]);\n\n  // Auto-generate key from name\n  const handleNameChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const name = e.target.value;\n      setForm((prev) => ({\n        ...prev,\n        name,\n        key: keyManuallyEdited ? prev.key : generateKey(name),\n      }));\n      setErrors((prev) => ({ ...prev, name: undefined }));\n    },\n    [keyManuallyEdited]\n  );\n\n  // Handle key change\n  const handleKeyChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const key = e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '');\n    setForm((prev) => ({ ...prev, key }));\n    setKeyManuallyEdited(true);\n    setErrors((prev) => ({ ...prev, key: undefined }));\n  }, []);\n\n  // Handle description change\n  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setForm((prev) => ({ ...prev, description: e.target.value }));\n  }, []);\n\n  // Handle TTL change\n  const handleTTLChange = useCallback((ttl: number | null) => {\n    setForm((prev) => ({ ...prev, ttl: ttl || 0 }));\n  }, []);\n\n  // Handle refresh config change\n  const handleRefreshChange = useCallback((config: RefreshConfig) => {\n    setForm((prev) => ({ ...prev, refresh: config }));\n  }, []);\n\n  // Handle data change\n  const handleDataChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setForm((prev) => ({ ...prev, data: e.target.value }));\n    setErrors((prev) => ({ ...prev, data: undefined }));\n  }, []);\n\n  // Format JSON data\n  const handleFormatData = useCallback(() => {\n    try {\n      const parsed = JSON.parse(form.data);\n      setForm((prev) => ({ ...prev, data: JSON.stringify(parsed, null, 2) }));\n      setErrors((prev) => ({ ...prev, data: undefined }));\n    } catch {\n      setErrors((prev) => ({ ...prev, data: 'Invalid JSON format' }));\n    }\n  }, [form.data]);\n\n  // Copy key to clipboard\n  const handleCopyKey = useCallback(async () => {\n    if (form.key) {\n      await nativeCopyText(form.key);\n      setKeyCopied(true);\n      if (isNative()) void nativeToast('Key copied');\n      setTimeout(() => setKeyCopied(false), 2000);\n    }\n  }, [form.key]);\n\n  // Handle back navigation\n  const handleBack = useCallback(() => {\n    navigate('/datasinks');\n  }, [navigate]);\n\n  // Load data preview\n  const handleShowData = useCallback(async () => {\n    if (!isEdit || !existingDataSink) return;\n\n    setIsLoadingPreview(true);\n    setPreviewError(null);\n\n    try {\n      const result = await getDataSinkData({ key: existingDataSink.key });\n      if (result?.raw) {\n        // Get first 20 items if it's an array, otherwise wrap in array\n        const data = Array.isArray(result.raw) ? result.raw.slice(0, 20) : [result.raw];\n        setPreviewData(data);\n      } else {\n        setPreviewData([]);\n      }\n    } catch (err) {\n      setPreviewError(err instanceof Error ? err.message : 'Failed to load data');\n    } finally {\n      setIsLoadingPreview(false);\n    }\n  }, [isEdit, existingDataSink, getDataSinkData]);\n\n  // Handle form submission\n  const handleSubmit = useCallback(\n    async (e: React.FormEvent) => {\n      e.preventDefault();\n      setSubmitError(null);\n\n      // Validate form\n      const validationErrors = validateForm(form);\n      if (Object.keys(validationErrors).length > 0) {\n        setErrors(validationErrors);\n        return;\n      }\n\n      setIsSaving(true);\n      try {\n        // Parse data JSON\n        let parsedData: Record<string, unknown> = {};\n        if (form.data && form.data.trim()) {\n          try {\n            parsedData = JSON.parse(form.data) as Record<string, unknown>;\n          } catch {\n            setErrors((prev) => ({ ...prev, data: 'Invalid JSON format' }));\n            setIsSaving(false);\n            return;\n          }\n        }\n\n        if (isEdit && existingDataSink) {\n          // Update existing\n          const input: UpdateDataSinkInput = {\n            id: existingDataSink.id,\n            version: existingDataSink.version,\n            name: form.name,\n            description: form.description || undefined,\n            ttl: form.ttl,\n            refresh: {\n              type: form.refresh.type as DataSinkRefreshType,\n              schedule: form.refresh.schedule,\n            },\n            data: parsedData, // Include data in update\n          };\n          const result = await updateDataSink(input);\n          if (!result) {\n            throw new Error('Failed to update DataSink');\n          }\n        } else {\n          // Create new - simplified flow (standalone DataSinks)\n          const input: CreateDataSinkInput = {\n            key: form.key,\n            name: form.name,\n            description: form.description || undefined,\n            ttl: form.ttl,\n            refresh: {\n              type: form.refresh.type as DataSinkRefreshType,\n              schedule: form.refresh.schedule,\n            },\n            data: parsedData, // Include data in create\n          };\n          const result = await createDataSink(input);\n          if (!result) {\n            throw new Error('Failed to create DataSink');\n          }\n        }\n        navigate('/datasinks');\n      } catch (err) {\n        setSubmitError(err instanceof Error ? err.message : 'Failed to save DataSink');\n      } finally {\n        setIsSaving(false);\n      }\n    },\n    [form, isEdit, existingDataSink, createDataSink, updateDataSink, navigate]\n  );\n\n  // Check if form is valid\n  const isFormValid = useMemo(() => {\n    const nameValid = form.name.trim().length >= 2;\n    const keyValid = form.key.trim().length > 0;\n\n    // Check JSON validity if data is provided\n    let dataValid = true;\n    if (form.data && form.data.trim()) {\n      try {\n        JSON.parse(form.data);\n      } catch {\n        dataValid = false;\n      }\n    }\n\n    return nameValid && keyValid && dataValid;\n  }, [form.name, form.key, form.data]);\n\n  // Loading state\n  if (loading && isEdit) {\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <Loader2 className=\"w-8 h-8 text-text-secondary animate-spin\" />\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px] p-card-padding\">\n        <div className=\"text-center\">\n          <AlertCircle className=\"w-12 h-12 text-status-error-text mx-auto mb-4\" />\n          <p className=\"text-status-error-text text-body-sm font-medium mb-2\">Failed to load DataSink</p>\n          <p className=\"text-text-tertiary text-body-xs\">{error.message}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // Read gate — the edit surface requires read access to the existing sink.\n  if (isEdit && !permissionsLoading && !canRead) {\n    return <AccessDenied title=\"Access Denied\" description=\"You don't have permission to view this data sink.\" />;\n  }\n\n  return (\n    <div className=\"min-h-screen bg-bg-canvas\">\n      <div className=\"max-w-3xl mx-auto p-card-padding\">\n        {/* Header */}\n        <div className=\"mb-6\">\n          <Button onClick={handleBack} variant=\"ghost\" size=\"sm\" className=\"mb-4\">\n            <ArrowLeft className=\"w-4 h-4 mr-2\" />\n            Back to DataSinks\n          </Button>\n          <h1 className=\"text-heading-h1 font-bold text-text-primary\">\n            {isEdit ? 'Edit DataSink' : 'Create DataSink'}\n          </h1>\n          <p className=\"text-body-sm text-text-secondary mt-1\">\n            {isEdit\n              ? 'Update the DataSink configuration.'\n              : 'Create a new DataSink to store and cache data. Use the unique key to connect workflows.'}\n          </p>\n        </div>\n\n        {/* Error Alert */}\n        {submitError && (\n          <div className=\"mb-6 p-4 bg-status-error-bg/10 border border-status-error-border/30 rounded-lg flex items-start gap-3\">\n            <AlertCircle className=\"w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-status-error-text\">Failed to save DataSink</p>\n              <p className=\"text-xs text-status-error-text/80 mt-1\">{submitError}</p>\n            </div>\n          </div>\n        )}\n\n        <PagePurpose className=\"mb-6\">\n          A data sink is the named, structured store your dashboards read from. Give it a unique key, configure how long\n          data is cached and how it refreshes, then point a workflow at that key to push data in. Get the basics right\n          here and everything downstream connects to it.\n        </PagePurpose>\n\n        {/* Form */}\n        <form onSubmit={handleSubmit} className=\"space-y-6\">\n          {/* Basic Information — primary emphasis zone */}\n          <GlassCard treatment=\"glass\" glow>\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                  <Database className=\"w-4 h-4 text-action-primary-bg\" />\n                </div>\n                <div>\n                  <CardTitle className=\"text-base\">Basic Information</CardTitle>\n                  <p className=\"text-xs text-text-secondary mt-0.5\">Essential details for your DataSink</p>\n                </div>\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-5\">\n              {/* Name field */}\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"name\">\n                  Name <span className=\"text-status-error-text\">*</span>\n                </Label>\n                <Input\n                  id=\"name\"\n                  type=\"text\"\n                  value={form.name}\n                  onChange={handleNameChange}\n                  placeholder=\"e.g., Sales Metrics\"\n                  className={errors.name ? 'border-status-error-border' : ''}\n                />\n                {errors.name && <p className=\"text-body-xs text-status-error-text\">{errors.name}</p>}\n              </div>\n\n              {/* Key field */}\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"key\">\n                  Unique Key <span className=\"text-status-error-text\">*</span>\n                </Label>\n                <div className=\"flex gap-2\">\n                  <Input\n                    id=\"key\"\n                    type=\"text\"\n                    value={form.key}\n                    onChange={handleKeyChange}\n                    placeholder=\"sales_metrics\"\n                    disabled={isEdit}\n                    className={`font-mono flex-1 ${errors.key ? 'border-status-error-border' : ''}`}\n                  />\n                  {form.key && (\n                    <Button type=\"button\" onClick={handleCopyKey} variant=\"outline\" size=\"sm\" className=\"px-3\">\n                      {keyCopied ? (\n                        <Check className=\"w-4 h-4 text-status-success-text\" />\n                      ) : (\n                        <Copy className=\"w-4 h-4\" />\n                      )}\n                    </Button>\n                  )}\n                </div>\n                {errors.key && <p className=\"text-body-xs text-status-error-text\">{errors.key}</p>}\n                <p className=\"text-body-xs text-text-tertiary\">\n                  {isEdit\n                    ? 'Key cannot be changed. Use this key in your workflows to push data.'\n                    : 'Auto-generated from name. This key will be used by workflows to push data.'}\n                </p>\n              </div>\n\n              {/* Description field */}\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"description\">Description</Label>\n                <Textarea\n                  id=\"description\"\n                  value={form.description}\n                  onChange={handleDescriptionChange}\n                  placeholder=\"Describe what data this sink stores...\"\n                  rows={2}\n                  className=\"resize-none\"\n                />\n              </div>\n            </CardContent>\n          </GlassCard>\n\n          {/* Configuration */}\n          <Card>\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                  <Settings className=\"w-4 h-4 text-action-primary-bg\" />\n                </div>\n                <div>\n                  <CardTitle className=\"text-base\">Configuration</CardTitle>\n                  <p className=\"text-xs text-text-secondary mt-0.5\">Cache and refresh settings</p>\n                </div>\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-5\">\n              {/* Cache TTL */}\n              <div className=\"space-y-2\">\n                <Label>Cache Duration</Label>\n                <CacheTTLSelector value={form.ttl} onChange={handleTTLChange} />\n                <p className=\"text-body-xs text-text-tertiary\">\n                  How long cached data remains valid before requiring refresh.\n                </p>\n              </div>\n\n              {/* Refresh Type */}\n              <RefreshTypeSelector value={form.refresh} onChange={handleRefreshChange} />\n            </CardContent>\n          </Card>\n\n          {/* Data Payload */}\n          <Card>\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                    <Database className=\"w-4 h-4 text-action-primary-bg\" />\n                  </div>\n                  <div>\n                    <CardTitle className=\"text-base\">Data Payload</CardTitle>\n                    <p className=\"text-xs text-text-secondary mt-0.5\">\n                      {isEdit ? 'Edit the JSON data stored in this DataSink' : 'Optional initial data (JSON format)'}\n                    </p>\n                  </div>\n                </div>\n                <Button type=\"button\" onClick={handleFormatData} variant=\"outline\" size=\"sm\">\n                  Format JSON\n                </Button>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <div className=\"space-y-2\">\n                <Textarea\n                  value={form.data}\n                  onChange={handleDataChange}\n                  placeholder='{\"key\": \"value\"}'\n                  rows={10}\n                  className={`font-mono text-xs resize-y ${errors.data ? 'border-status-error-border' : ''}`}\n                />\n                {errors.data && <p className=\"text-body-xs text-status-error-text\">{errors.data}</p>}\n                <p className=\"text-body-xs text-text-tertiary\">\n                  Enter valid JSON data. This data will be stored and can be accessed by widgets via parsers.\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Data Preview - Only show for existing DataSinks */}\n          {isEdit && existingDataSink && (\n            <Card>\n              <CardHeader className=\"pb-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                      <Eye className=\"w-4 h-4 text-action-primary-bg\" />\n                    </div>\n                    <div>\n                      <CardTitle className=\"text-base\">Data Preview</CardTitle>\n                      <p className=\"text-xs text-text-secondary mt-0.5\">Preview the first 20 records</p>\n                    </div>\n                  </div>\n                  <Button\n                    type=\"button\"\n                    onClick={handleShowData}\n                    variant=\"outline\"\n                    size=\"sm\"\n                    disabled={isLoadingPreview}\n                  >\n                    {isLoadingPreview ? (\n                      <>\n                        <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                        Loading...\n                      </>\n                    ) : (\n                      <>\n                        <Eye className=\"w-4 h-4 mr-2\" />\n                        Show Data\n                      </>\n                    )}\n                  </Button>\n                </div>\n              </CardHeader>\n              {(previewData || previewError) && (\n                <CardContent>\n                  {previewError ? (\n                    <div className=\"p-4 bg-status-error-bg/10 border border-status-error-border/30 rounded-md\">\n                      <p className=\"text-sm text-status-error-text\">{previewError}</p>\n                    </div>\n                  ) : previewData && previewData.length > 0 ? (\n                    <pre className=\"p-4 bg-bg-sunken rounded-md overflow-auto max-h-[300px] text-xs font-mono\">\n                      {JSON.stringify(previewData, null, 2)}\n                    </pre>\n                  ) : (\n                    <IllustratedEmptyState\n                      illustration=\"empty-generic\"\n                      title=\"No data available yet\"\n                      description=\"Connect a workflow to this sink's key to start pushing data.\"\n                    />\n                  )}\n                </CardContent>\n              )}\n            </Card>\n          )}\n\n          {/* Submit */}\n          <div className=\"flex items-center justify-end gap-4 pt-4\">\n            <Button type=\"button\" onClick={handleBack} variant=\"secondary\">\n              Cancel\n            </Button>\n            <PermissionButton permission={savePermission} deniedBehavior=\"disable\">\n              <Button type=\"submit\" disabled={!isFormValid || isSaving} variant=\"default\">\n                {isSaving ? (\n                  <>\n                    <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                    Saving...\n                  </>\n                ) : (\n                  <>\n                    <Save className=\"w-4 h-4 mr-2\" />\n                    {isEdit ? 'Save Changes' : 'Create DataSink'}\n                  </>\n                )}\n              </Button>\n            </PermissionButton>\n          </div>\n        </form>\n\n        {/* Info Box for New DataSinks */}\n        {!isEdit && (\n          <div className=\"mt-6 p-4 bg-bg-sunken rounded-lg border border-border-default\">\n            <h3 className=\"text-sm font-medium text-text-primary mb-2\">What&apos;s Next?</h3>\n            <ol className=\"list-decimal list-inside text-xs text-text-secondary space-y-1\">\n              <li>Create this DataSink to get your unique key</li>\n              <li>\n                Go to <strong>Workflows</strong> and create a FluidGrids workflow\n              </li>\n              <li>Use the unique key in your workflow to push data to this DataSink</li>\n              <li>\n                Create <strong>Parsers</strong> to transform the data using JQ or JSONata\n              </li>\n            </ol>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkBuilderPage;\n"],"mappings":";;;;;;;;;;;;;;;AAmEA,SAAS,GAAY,GAAsB;AACzC,QAAO,EACJ,aAAa,CACb,QAAQ,eAAe,IAAI,CAC3B,QAAQ,YAAY,GAAG,CACvB,UAAU,GAAG,GAAG;;AAMrB,SAAS,GAAa,GAA6B;CACjD,IAAM,IAAqB,EAAE;AAmB7B,KAjBK,EAAK,KAAK,MAAM,GAEV,EAAK,KAAK,SAAS,IAC5B,EAAO,OAAO,uCACL,EAAK,KAAK,SAAS,QAC5B,EAAO,OAAO,2CAJd,EAAO,OAAO,oBAOX,EAAK,IAAI,MAAM,GAER,eAAe,KAAK,EAAK,IAAI,GAE9B,EAAK,IAAI,SAAS,OAC3B,EAAO,MAAM,yCAFb,EAAO,MAAM,qEAFb,EAAO,MAAM,mBAQX,EAAK,QAAQ,EAAK,KAAK,MAAM,CAC/B,KAAI;AACF,OAAK,MAAM,EAAK,KAAK;SACf;AACN,IAAO,OAAO;;AAIlB,QAAO;;AAOT,IAAa,IAAsB,EAAK,WAA+B;CACrE,IAAM,EAAE,kBAAe,GAAoC,EACrD,IAAW,GAAgB,EAE3B,IAAS,MAAe,SAAS,CAAC,CAAC,GAInC,EAAE,mBAAe,WAAW,OAAuB,IAAgB,EACnE,KAAU,GAAc,EAAuB,cAAc,EAC7D,KAAiB,IAAS,EAAuB,kBAAkB,EAAuB,iBAG1F,CAAC,GAAM,KAAW,EAAoB;EAC1C,MAAM;EACN,KAAK;EACL,aAAa;EACb,KAAK;EACL,SAAS,EACP,MAAM,UACP;EACD,MAAM;EACP,CAAC,EACI,CAAC,GAAQ,KAAa,EAAqB,EAAE,CAAC,EAC9C,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAC7D,CAAC,IAAW,KAAgB,EAAS,GAAM,EAG3C,CAAC,GAAkB,KAAuB,EAAS,GAAM,EACzD,CAAC,GAAa,KAAkB,EAA2B,KAAK,EAChE,CAAC,GAAc,KAAmB,EAAwB,KAAK,EAG/D,EAAE,aAAS,UAAO,eAAW,kBAAe,mBAAgB,mBAAgB,uBAChF,EAAsB,EACpB,WAAW,IACZ,CAAC,EAGE,IAAmB,IAAS,GAAU,MAAM,MAAO,EAAG,OAAO,EAAW,GAAG;AAGjF,SAAgB;AACd,EAAI,KAAU,KAAc,CAAC,KAC3B,EAAc,EAAW;IAE1B;EAAC;EAAQ;EAAY;EAAkB;EAAc,CAAC;CAGzD,IAAM,CAAC,GAAiB,MAAsB,EAAS,GAAM;AAG7D,SAAgB;AACd,MAAI,KAAoB,CAAC,GAAiB;GAExC,IAAI,IAAa;AACjB,OAAI,EAAiB,KACnB,KAAI;AAEF,QAAI,OAAO,EAAiB,QAAS,UAAU;KAE7C,IAAM,IAAS,KAAK,MAAM,EAAiB,KAAK;AAChD,SAAa,KAAK,UAAU,GAAQ,MAAM,EAAE;UAG5C,KAAa,KAAK,UAAU,EAAiB,MAAM,MAAM,EAAE;WAEvD;AAEN,QAAa,OAAO,EAAiB,QAAS,WAAW,EAAiB,OAAO;;AAwBrF,GApBA,EAAQ;IACN,MAAM,EAAiB,QAAQ;IAC/B,KAAK,EAAiB,OAAO;IAC7B,aAAa,EAAiB,eAAe;IAC7C,KAAK,EAAiB,OAAO;IAC7B,SAAS,EAAiB,UACtB;KACE,MAAM,EAAiB,QAAQ,SAAS,cAAc,cAAc;KACpE,UAAU,EAAiB,QAAQ,WAC/B;MACE,MAAM,EAAiB,QAAQ,SAAS;MACxC,UAAU,EAAiB,QAAQ,SAAS;MAC7C,GACD,KAAA;KACL,GACD,EAAE,MAAM,UAAU;IACtB,MAAM;IACP,CAAC,EACF,EAAqB,GAAK,EAC1B,GAAmB,GAAK,EACxB,EAAU,EAAE,CAAC;;IAEd,CAAC,GAAkB,EAAgB,CAAC;CAGvC,IAAM,KAAmB,GACtB,MAA2C;EAC1C,IAAM,IAAO,EAAE,OAAO;AAMtB,EALA,GAAS,OAAU;GACjB,GAAG;GACH;GACA,KAAK,IAAoB,EAAK,MAAM,GAAY,EAAK;GACtD,EAAE,EACH,GAAW,OAAU;GAAE,GAAG;GAAM,MAAM,KAAA;GAAW,EAAE;IAErD,CAAC,EAAkB,CACpB,EAGK,KAAkB,GAAa,MAA2C;EAC9E,IAAM,IAAM,EAAE,OAAO,MAAM,aAAa,CAAC,QAAQ,eAAe,GAAG;AAGnE,EAFA,GAAS,OAAU;GAAE,GAAG;GAAM;GAAK,EAAE,EACrC,EAAqB,GAAK,EAC1B,GAAW,OAAU;GAAE,GAAG;GAAM,KAAK,KAAA;GAAW,EAAE;IACjD,EAAE,CAAC,EAGA,KAA0B,GAAa,MAA8C;AACzF,KAAS,OAAU;GAAE,GAAG;GAAM,aAAa,EAAE,OAAO;GAAO,EAAE;IAC5D,EAAE,CAAC,EAGA,KAAkB,GAAa,MAAuB;AAC1D,KAAS,OAAU;GAAE,GAAG;GAAM,KAAK,KAAO;GAAG,EAAE;IAC9C,EAAE,CAAC,EAGA,KAAsB,GAAa,MAA0B;AACjE,KAAS,OAAU;GAAE,GAAG;GAAM,SAAS;GAAQ,EAAE;IAChD,EAAE,CAAC,EAGA,IAAmB,GAAa,MAA8C;AAElF,EADA,GAAS,OAAU;GAAE,GAAG;GAAM,MAAM,EAAE,OAAO;GAAO,EAAE,EACtD,GAAW,OAAU;GAAE,GAAG;GAAM,MAAM,KAAA;GAAW,EAAE;IAClD,EAAE,CAAC,EAGA,KAAmB,QAAkB;AACzC,MAAI;GACF,IAAM,IAAS,KAAK,MAAM,EAAK,KAAK;AAEpC,GADA,GAAS,OAAU;IAAE,GAAG;IAAM,MAAM,KAAK,UAAU,GAAQ,MAAM,EAAE;IAAE,EAAE,EACvE,GAAW,OAAU;IAAE,GAAG;IAAM,MAAM,KAAA;IAAW,EAAE;UAC7C;AACN,MAAW,OAAU;IAAE,GAAG;IAAM,MAAM;IAAuB,EAAE;;IAEhE,CAAC,EAAK,KAAK,CAAC,EAGT,KAAgB,EAAY,YAAY;AAC5C,EAAI,EAAK,QACP,MAAM,GAAe,EAAK,IAAI,EAC9B,EAAa,GAAK,EACd,IAAU,IAAO,GAAY,aAAa,EAC9C,iBAAiB,EAAa,GAAM,EAAE,IAAK;IAE5C,CAAC,EAAK,IAAI,CAAC,EAGR,IAAa,QAAkB;AACnC,IAAS,aAAa;IACrB,CAAC,EAAS,CAAC,EAGR,KAAiB,EAAY,YAAY;AACzC,SAAC,KAAU,CAAC,IAGhB;GADA,EAAoB,GAAK,EACzB,EAAgB,KAAK;AAErB,OAAI;IACF,IAAM,IAAS,MAAM,EAAgB,EAAE,KAAK,EAAiB,KAAK,CAAC;AACnE,IAAI,GAAQ,MAGV,EADa,MAAM,QAAQ,EAAO,IAAI,GAAG,EAAO,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC,EAAO,IAAI,CAC3D,GAEpB,EAAe,EAAE,CAAC;YAEb,GAAK;AACZ,MAAgB,aAAe,QAAQ,EAAI,UAAU,sBAAsB;aACnE;AACR,MAAoB,GAAM;;;IAE3B;EAAC;EAAQ;EAAkB;EAAgB,CAAC,EAGzC,KAAe,EACnB,OAAO,MAAuB;AAE5B,EADA,EAAE,gBAAgB,EAClB,EAAe,KAAK;EAGpB,IAAM,IAAmB,GAAa,EAAK;AAC3C,MAAI,OAAO,KAAK,EAAiB,CAAC,SAAS,GAAG;AAC5C,KAAU,EAAiB;AAC3B;;AAGF,IAAY,GAAK;AACjB,MAAI;GAEF,IAAI,IAAsC,EAAE;AAC5C,OAAI,EAAK,QAAQ,EAAK,KAAK,MAAM,CAC/B,KAAI;AACF,QAAa,KAAK,MAAM,EAAK,KAAK;WAC5B;AAEN,IADA,GAAW,OAAU;KAAE,GAAG;KAAM,MAAM;KAAuB,EAAE,EAC/D,EAAY,GAAM;AAClB;;AAIJ,OAAI,KAAU;QAeR,CADW,MAAM,EAZc;KACjC,IAAI,EAAiB;KACrB,SAAS,EAAiB;KAC1B,MAAM,EAAK;KACX,aAAa,EAAK,eAAe,KAAA;KACjC,KAAK,EAAK;KACV,SAAS;MACP,MAAM,EAAK,QAAQ;MACnB,UAAU,EAAK,QAAQ;MACxB;KACD,MAAM;KACP,CACyC,CAExC,OAAU,MAAM,4BAA4B;cAgB1C,CADW,MAAM,EAXc;IACjC,KAAK,EAAK;IACV,MAAM,EAAK;IACX,aAAa,EAAK,eAAe,KAAA;IACjC,KAAK,EAAK;IACV,SAAS;KACP,MAAM,EAAK,QAAQ;KACnB,UAAU,EAAK,QAAQ;KACxB;IACD,MAAM;IACP,CACyC,CAExC,OAAU,MAAM,4BAA4B;AAGhD,KAAS,aAAa;WACf,GAAK;AACZ,KAAe,aAAe,QAAQ,EAAI,UAAU,0BAA0B;YACtE;AACR,KAAY,GAAM;;IAGtB;EAAC;EAAM;EAAQ;EAAkB;EAAgB;EAAgB;EAAS,CAC3E,EAGK,KAAc,SAAc;EAChC,IAAM,IAAY,EAAK,KAAK,MAAM,CAAC,UAAU,GACvC,IAAW,EAAK,IAAI,MAAM,CAAC,SAAS,GAGtC,IAAY;AAChB,MAAI,EAAK,QAAQ,EAAK,KAAK,MAAM,CAC/B,KAAI;AACF,QAAK,MAAM,EAAK,KAAK;UACf;AACN,OAAY;;AAIhB,SAAO,KAAa,KAAY;IAC/B;EAAC,EAAK;EAAM,EAAK;EAAK,EAAK;EAAK,CAAC;AA6BpC,QA1BI,MAAW,IAEX,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAS,WAAU,4CAA6C,CAAA;EAC5D,CAAA,GAKN,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAa,WAAU,iDAAkD,CAAA;IACzE,kBAAC,KAAD;KAAG,WAAU;eAAuD;KAA2B,CAAA;IAC/F,kBAAC,KAAD;KAAG,WAAU;eAAmC,EAAM;KAAY,CAAA;IAC9D;;EACF,CAAA,GAKN,KAAU,CAAC,MAAsB,CAAC,KAC7B,kBAAC,GAAD;EAAc,OAAM;EAAgB,aAAY;EAAsD,CAAA,GAI7G,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OAAQ,SAAS;OAAY,SAAQ;OAAQ,MAAK;OAAK,WAAU;iBAAjE,CACE,kBAAC,IAAD,EAAW,WAAU,gBAAiB,CAAA,EAAA,oBAE/B;;MACT,kBAAC,MAAD;OAAI,WAAU;iBACX,IAAS,kBAAkB;OACzB,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBACV,IACG,uCACA;OACF,CAAA;MACA;;IAGL,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAa,WAAU,uDAAwD,CAAA,EAC/E,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;MAAG,WAAU;gBAA6C;MAA2B,CAAA,EACrF,kBAAC,KAAD;MAAG,WAAU;gBAA0C;MAAgB,CAAA,CACnE,EAAA,CAAA,CACF;;IAGR,kBAAC,IAAD;KAAa,WAAU;eAAO;KAIhB,CAAA;IAGd,kBAAC,QAAD;KAAM,UAAU;KAAc,WAAU;eAAxC;MAEE,kBAAC,IAAD;OAAW,WAAU;OAAQ,MAAA;iBAA7B,CACE,kBAAC,GAAD;QAAY,WAAU;kBACpB,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD,EAAU,WAAU,kCAAmC,CAAA;UACnD,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;UAAW,WAAU;oBAAY;UAA6B,CAAA,EAC9D,kBAAC,KAAD;UAAG,WAAU;oBAAqC;UAAuC,CAAA,CACrF,EAAA,CAAA,CACF;;QACK,CAAA,EACb,kBAAC,GAAD;QAAa,WAAU;kBAAvB;SAEE,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,GAAD;YAAO,SAAQ;sBAAf,CAAsB,SACf,kBAAC,QAAD;aAAM,WAAU;uBAAyB;aAAQ,CAAA,CAChD;;WACR,kBAAC,GAAD;YACE,IAAG;YACH,MAAK;YACL,OAAO,EAAK;YACZ,UAAU;YACV,aAAY;YACZ,WAAW,EAAO,OAAO,+BAA+B;YACxD,CAAA;WACD,EAAO,QAAQ,kBAAC,KAAD;YAAG,WAAU;sBAAuC,EAAO;YAAS,CAAA;WAChF;;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,GAAD;YAAO,SAAQ;sBAAf,CAAqB,eACR,kBAAC,QAAD;aAAM,WAAU;uBAAyB;aAAQ,CAAA,CACtD;;WACR,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,GAAD;aACE,IAAG;aACH,MAAK;aACL,OAAO,EAAK;aACZ,UAAU;aACV,aAAY;aACZ,UAAU;aACV,WAAW,oBAAoB,EAAO,MAAM,+BAA+B;aAC3E,CAAA,EACD,EAAK,OACJ,kBAAC,GAAD;aAAQ,MAAK;aAAS,SAAS;aAAe,SAAQ;aAAU,MAAK;aAAK,WAAU;uBACjF,KACC,kBAAC,IAAD,EAAO,WAAU,oCAAqC,CAAA,GAEtD,kBAAC,IAAD,EAAM,WAAU,WAAY,CAAA;aAEvB,CAAA,CAEP;;WACL,EAAO,OAAO,kBAAC,KAAD;YAAG,WAAU;sBAAuC,EAAO;YAAQ,CAAA;WAClF,kBAAC,KAAD;YAAG,WAAU;sBACV,IACG,wEACA;YACF,CAAA;WACA;;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAO,SAAQ;qBAAc;WAAmB,CAAA,EAChD,kBAAC,GAAD;WACE,IAAG;WACH,OAAO,EAAK;WACZ,UAAU;WACV,aAAY;WACZ,MAAM;WACN,WAAU;WACV,CAAA,CACE;;SACM;UACJ;;MAGZ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;OAAY,WAAU;iBACpB,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,IAAD,EAAU,WAAU,kCAAmC,CAAA;SACnD,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;SAAW,WAAU;mBAAY;SAAyB,CAAA,EAC1D,kBAAC,KAAD;SAAG,WAAU;mBAAqC;SAA8B,CAAA,CAC5E,EAAA,CAAA,CACF;;OACK,CAAA,EACb,kBAAC,GAAD;OAAa,WAAU;iBAAvB,CAEE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,GAAD,EAAA,UAAO,kBAAsB,CAAA;SAC7B,kBAAC,GAAD;UAAkB,OAAO,EAAK;UAAK,UAAU;UAAmB,CAAA;SAChE,kBAAC,KAAD;UAAG,WAAU;oBAAkC;UAE3C,CAAA;SACA;WAGN,kBAAC,IAAD;QAAqB,OAAO,EAAK;QAAS,UAAU;QAAuB,CAAA,CAC/D;SACT,EAAA,CAAA;MAGP,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;OAAY,WAAU;iBACpB,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD,EAAU,WAAU,kCAAmC,CAAA;UACnD,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;UAAW,WAAU;oBAAY;UAAwB,CAAA,EACzD,kBAAC,KAAD;UAAG,WAAU;oBACV,IAAS,+CAA+C;UACvD,CAAA,CACA,EAAA,CAAA,CACF;YACN,kBAAC,GAAD;SAAQ,MAAK;SAAS,SAAS;SAAkB,SAAQ;SAAU,MAAK;mBAAK;SAEpE,CAAA,CACL;;OACK,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD;SACE,OAAO,EAAK;SACZ,UAAU;SACV,aAAY;SACZ,MAAM;SACN,WAAW,8BAA8B,EAAO,OAAO,+BAA+B;SACtF,CAAA;QACD,EAAO,QAAQ,kBAAC,KAAD;SAAG,WAAU;mBAAuC,EAAO;SAAS,CAAA;QACpF,kBAAC,KAAD;SAAG,WAAU;mBAAkC;SAE3C,CAAA;QACA;UACM,CAAA,CACT,EAAA,CAAA;MAGN,KAAU,KACT,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;OAAY,WAAU;iBACpB,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD,EAAK,WAAU,kCAAmC,CAAA;UAC9C,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;UAAW,WAAU;oBAAY;UAAwB,CAAA,EACzD,kBAAC,KAAD;UAAG,WAAU;oBAAqC;UAAgC,CAAA,CAC9E,EAAA,CAAA,CACF;YACN,kBAAC,GAAD;SACE,MAAK;SACL,SAAS;SACT,SAAQ;SACR,MAAK;SACL,UAAU;mBAET,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,6BAA8B,CAAA,EAAA,aAEhD,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAK,WAAU,gBAAiB,CAAA,EAAA,YAE/B,EAAA,CAAA;SAEE,CAAA,CACL;;OACK,CAAA,GACX,KAAe,MACf,kBAAC,GAAD,EAAA,UACG,IACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAkC;QAAiB,CAAA;OAC5D,CAAA,GACJ,KAAe,EAAY,SAAS,IACtC,kBAAC,OAAD;OAAK,WAAU;iBACZ,KAAK,UAAU,GAAa,MAAM,EAAE;OACjC,CAAA,GAEN,kBAAC,IAAD;OACE,cAAa;OACb,OAAM;OACN,aAAY;OACZ,CAAA,EAEQ,CAAA,CAEX,EAAA,CAAA;MAIT,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QAAQ,MAAK;QAAS,SAAS;QAAY,SAAQ;kBAAY;QAEtD,CAAA,EACT,kBAAC,GAAD;QAAkB,YAAY;QAAgB,gBAAe;kBAC3D,kBAAC,GAAD;SAAQ,MAAK;SAAS,UAAU,CAAC,MAAe;SAAU,SAAQ;mBAC/D,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,6BAA8B,CAAA,EAAA,YAEhD,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,IAAD,EAAM,WAAU,gBAAiB,CAAA,EAChC,IAAS,iBAAiB,kBAC1B,EAAA,CAAA;SAEE,CAAA;QACQ,CAAA,CACf;;MACD;;IAGN,CAAC,KACA,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA6C;MAAsB,CAAA,EACjF,kBAAC,MAAD;MAAI,WAAU;gBAAd;OACE,kBAAC,MAAD,EAAA,UAAI,+CAAgD,CAAA;OACpD,kBAAC,MAAD,EAAA,UAAA;QAAI;QACI,kBAAC,UAAD,EAAA,UAAQ,aAAkB,CAAA;;QAC7B,EAAA,CAAA;OACL,kBAAC,MAAD,EAAA,UAAI,qEAAsE,CAAA;OAC1E,kBAAC,MAAD,EAAA,UAAA;QAAI;QACK,kBAAC,UAAD,EAAA,UAAQ,WAAgB,CAAA;;QAC5B,EAAA,CAAA;OACF;QACD;;IAEJ;;EACF,CAAA;EAER"}