@burdenoff/microfe-bigconsole 2026.804.2 → 2026.805.2

package/dist/bigconsole/components/dashboard/ShareDialog/EmbedTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedTab.js","names":[],"sources":["../../../../../src/bigconsole/components/dashboard/ShareDialog/EmbedTab.tsx"],"sourcesContent":["/**\n * EmbedTab — \"Publish to web\" section of the dashboard Share dialog.\n *\n * Owner-facing UI to publish a dashboard as an anonymous-link embed serving LIVE\n * data, manage the allowed parent domains, copy the iframe snippet, rotate the\n * link key, and unpublish. Backed by {@link useDashboardEmbedPolicy}; all\n * mutations are gateway-enforced by `@rbac(manage_embed)` (owner-only).\n *\n * Self-contained (inline styles driven by the dialog's `colors`) so it slots into\n * the existing hand-styled ShareDialog without a broader refactor.\n */\n\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useDashboardEmbedPolicy, themeChoiceFromPolicy } from '../../../hooks/useDashboardEmbedPolicy';\n\ninterface DialogColors {\n  bgPrimary: string;\n  bgSecondary: string;\n  bgTertiary: string;\n  textPrimary: string;\n  textSecondary: string;\n  textTertiary: string;\n  borderDefault: string;\n  actionPrimaryBg: string;\n  actionPrimaryBgHover: string;\n  statusSuccessBg: string;\n  statusErrorText: string;\n}\n\nexport interface EmbedTabProps {\n  dashboardId: string;\n  colors: DialogColors;\n}\n\n/** Embed color-mode baked into the iframe URL (BOFF-5734). */\ntype EmbedSnippetTheme = 'light' | 'dark' | 'auto';\n\nconst THEME_OPTIONS: ReadonlyArray<{ value: EmbedSnippetTheme; label: string }> = [\n  { value: 'light', label: 'Light' },\n  { value: 'dark', label: 'Dark' },\n  { value: 'auto', label: 'Auto (match viewer)' },\n];\n\n/**\n * Bake the chosen color mode into an iframe snippet by adding `?theme=` to its\n * `src` URL. `light` is the default and is left implicit so existing/plain\n * snippets stay unchanged. The secret `#key=` fragment is preserved untouched.\n *\n * Inserted via string splicing (before the fragment) rather than `URL`/\n * `URLSearchParams`, which re-serialize ALL params and could subtly re-encode\n * existing ones (e.g. `%20` → `+`). `theme` is a fixed enum, so no encoding is\n * needed; every other part of the URL is passed through byte-for-byte.\n */\nexport function withThemeInSnippet(snippet: string, theme: EmbedSnippetTheme): string {\n  if (theme === 'light') return snippet;\n  // Require whitespace before `src` so we match the real attribute, never a\n  // substring like `data-src`/`srcdoc` (the snippet is backend-generated with\n  // each attribute on its own indented line).\n  return snippet.replace(/(?<=\\s)src=\"([^\"]*)\"/, (_match, url: string) => {\n    const hashIdx = url.indexOf('#');\n    const base = hashIdx === -1 ? url : url.slice(0, hashIdx);\n    const fragment = hashIdx === -1 ? '' : url.slice(hashIdx);\n    const sep = base.includes('?') ? '&' : '?';\n    return `src=\"${base}${sep}theme=${theme}${fragment}\"`;\n  });\n}\n\n/** Validate an exact https origin (matches the backend allowlist rules). */\nfunction normalizeOrigin(raw: string): string | null {\n  const trimmed = raw.trim();\n  if (!trimmed) return null;\n  try {\n    const url = new URL(trimmed);\n    if (url.protocol !== 'https:') return null;\n    if ((url.pathname !== '' && url.pathname !== '/') || url.search || url.hash) return null;\n    return url.origin;\n  } catch {\n    return null;\n  }\n}\n\nexport function EmbedTab({ dashboardId, colors }: EmbedTabProps) {\n  const {\n    policy,\n    secret,\n    loading,\n    error,\n    fetchPolicy,\n    publishToWeb,\n    applyPresentation,\n    setAllowedOrigins,\n    rotateKey,\n    unpublish,\n  } = useDashboardEmbedPolicy();\n\n  const [domainInput, setDomainInput] = useState('');\n  const [pendingDomains, setPendingDomains] = useState<string[]>([]);\n  const [attested, setAttested] = useState(false);\n  const [copied, setCopied] = useState(false);\n  // Presentation options (BOFF-5735). Defaults mirror the backend column defaults\n  // so a fresh publish captures a sensible look without extra clicks.\n  const [theme, setTheme] = useState<EmbedSnippetTheme>('light');\n  const [showTitle, setShowTitle] = useState(false);\n  const [showBranding, setShowBranding] = useState(true);\n  const [presentationSaved, setPresentationSaved] = useState(false);\n  const [localError, setLocalError] = useState<string | null>(null);\n  // Only seed the presentation controls once per policy identity — NOT on every\n  // `policy` object change. Otherwise an unrelated mutation (e.g. adding a domain\n  // via setAllowedOrigins) would return a fresh policy object and clobber the\n  // owner's in-progress, not-yet-applied theme/title/branding edits.\n  const syncedPolicyIdRef = useRef<string | null>(null);\n  const savedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (dashboardId) fetchPolicy(dashboardId);\n  }, [dashboardId, fetchPolicy]);\n\n  // Reflect the persisted presentation the first time each policy loads.\n  useEffect(() => {\n    if (!policy || syncedPolicyIdRef.current === policy.id) return;\n    syncedPolicyIdRef.current = policy.id;\n    setTheme(themeChoiceFromPolicy(policy.presentationTheme));\n    setShowTitle(policy.showDashboardTitle);\n    setShowBranding(policy.showBrandingFooter);\n  }, [policy]);\n\n  // Clear any pending \"Updated ✓\" timer on unmount.\n  useEffect(\n    () => () => {\n      if (savedTimerRef.current) clearTimeout(savedTimerRef.current);\n    },\n    []\n  );\n\n  const isPublished = policy?.status === 'ACTIVE';\n  const domains = isPublished ? (policy?.allowedParentOrigins ?? []) : pendingDomains;\n\n  // The copyable iframe snippet: from the one-time secret if present (fresh\n  // publish/rotate), else reconstructed from the locator for an already-published\n  // policy (the fragment key is only available in the one-time secret).\n  const iframeSnippet = useMemo(() => {\n    if (secret?.iframeSnippet) return withThemeInSnippet(secret.iframeSnippet, theme);\n    return null;\n  }, [secret, theme]);\n\n  const addDomain = () => {\n    setLocalError(null);\n    const origin = normalizeOrigin(domainInput);\n    if (!origin) {\n      setLocalError('Enter a valid https origin, e.g. https://example.com');\n      return;\n    }\n    if (domains.includes(origin)) {\n      setDomainInput('');\n      return;\n    }\n    if (isPublished && policy) {\n      void setAllowedOrigins(policy.id, [...domains, origin]);\n    } else {\n      setPendingDomains((prev) => [...prev, origin]);\n    }\n    setDomainInput('');\n  };\n\n  const removeDomain = (origin: string) => {\n    if (isPublished && policy) {\n      void setAllowedOrigins(\n        policy.id,\n        domains.filter((d) => d !== origin)\n      );\n    } else {\n      setPendingDomains((prev) => prev.filter((d) => d !== origin));\n    }\n  };\n\n  const handlePublish = async () => {\n    setLocalError(null);\n    if (pendingDomains.length === 0) {\n      setLocalError('Add at least one allowed website domain before publishing.');\n      return;\n    }\n    if (!attested) {\n      setLocalError('Please confirm this dashboard is safe to be public.');\n      return;\n    }\n    await publishToWeb(dashboardId, pendingDomains, true, { theme, showTitle, showBranding });\n  };\n\n  const handleApplyPresentation = async () => {\n    if (!policy) return;\n    setLocalError(null);\n    const updated = await applyPresentation(policy.id, { theme, showTitle, showBranding });\n    if (updated) {\n      setPresentationSaved(true);\n      // Clear any in-flight timer so rapid re-clicks don't hide the confirmation early.\n      if (savedTimerRef.current) clearTimeout(savedTimerRef.current);\n      savedTimerRef.current = setTimeout(() => setPresentationSaved(false), 1500);\n    }\n  };\n\n  const handleCopy = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch {\n      setLocalError('Could not copy — select and copy manually.');\n    }\n  };\n\n  const primaryBtn: React.CSSProperties = {\n    padding: '8px 14px',\n    borderRadius: '8px',\n    border: 'none',\n    background: colors.actionPrimaryBg,\n    color: '#fff',\n    fontSize: '13px',\n    fontWeight: 600,\n    cursor: 'pointer',\n  };\n  const ghostBtn: React.CSSProperties = {\n    padding: '8px 14px',\n    borderRadius: '8px',\n    border: `1px solid ${colors.borderDefault}`,\n    background: 'transparent',\n    color: colors.textPrimary,\n    fontSize: '13px',\n    cursor: 'pointer',\n  };\n  const inputStyle: React.CSSProperties = {\n    flex: 1,\n    padding: '8px 10px',\n    borderRadius: '8px',\n    border: `1px solid ${colors.borderDefault}`,\n    background: colors.bgSecondary,\n    color: colors.textPrimary,\n    fontSize: '13px',\n  };\n  const selectStyle: React.CSSProperties = {\n    padding: '4px 8px',\n    borderRadius: '6px',\n    border: `1px solid ${colors.borderDefault}`,\n    background: colors.bgSecondary,\n    color: colors.textPrimary,\n    fontSize: '12px',\n    cursor: 'pointer',\n  };\n  const toggleRow: React.CSSProperties = {\n    display: 'flex',\n    gap: '8px',\n    alignItems: 'flex-start',\n    fontSize: '12px',\n    color: colors.textSecondary,\n  };\n\n  // Presentation controls (BOFF-5735) — shared by the pre-publish and published\n  // states. Local state drives both the persisted policy and the snippet `?theme=`.\n  const presentationControls = (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>\n      <label style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>\n        <span style={{ fontSize: '12px', color: colors.textSecondary }}>Theme</span>\n        <select\n          value={theme}\n          onChange={(e) => {\n            // The options are fixed, but narrow instead of casting so an\n            // unexpected value can never slip into state.\n            const value = e.target.value;\n            if (value === 'light' || value === 'dark' || value === 'auto') {\n              setTheme(value);\n            }\n          }}\n          style={selectStyle}\n        >\n          {THEME_OPTIONS.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n      </label>\n      <label style={toggleRow}>\n        <input type=\"checkbox\" checked={showTitle} onChange={(e) => setShowTitle(e.target.checked)} />\n        <span>Show the dashboard title as a header</span>\n      </label>\n      <label style={toggleRow}>\n        <input type=\"checkbox\" checked={showBranding} onChange={(e) => setShowBranding(e.target.checked)} />\n        <span>Show a subtle “Powered by BigConsole” footer</span>\n      </label>\n    </div>\n  );\n\n  return (\n    <div style={{ padding: '20px 24px' }}>\n      {/* Status banner */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: '12px 14px',\n          borderRadius: '10px',\n          background: colors.bgSecondary,\n          marginBottom: '16px',\n        }}\n      >\n        <div>\n          <div style={{ fontSize: '14px', fontWeight: 600, color: colors.textPrimary }}>Publish to the web</div>\n          <div style={{ fontSize: '12px', color: colors.textSecondary, marginTop: '2px' }}>\n            {isPublished\n              ? 'This dashboard is live. Anyone with the link on an allowed website sees its live data.'\n              : 'Embed this dashboard on your website. Viewers see live data — no login required.'}\n          </div>\n        </div>\n        <span\n          style={{\n            fontSize: '11px',\n            fontWeight: 700,\n            padding: '3px 8px',\n            borderRadius: '999px',\n            color: '#fff',\n            background: isPublished ? colors.statusSuccessBg : colors.textTertiary,\n          }}\n        >\n          {isPublished ? 'PUBLISHED' : 'PRIVATE'}\n        </span>\n      </div>\n\n      {/* Allowed domains */}\n      <div style={{ marginBottom: '16px' }}>\n        <div style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary, marginBottom: '6px' }}>\n          Allowed website domains\n        </div>\n        <div style={{ display: 'flex', gap: '8px', marginBottom: '8px' }}>\n          <input\n            style={inputStyle}\n            placeholder=\"https://yoursite.com\"\n            value={domainInput}\n            onChange={(e) => setDomainInput(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') addDomain();\n            }}\n          />\n          <button style={ghostBtn} onClick={addDomain} type=\"button\">\n            Add\n          </button>\n        </div>\n        {domains.length === 0 ? (\n          <div style={{ fontSize: '12px', color: colors.textTertiary }}>\n            No domains yet. Only listed https domains may frame this dashboard.\n          </div>\n        ) : (\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>\n            {domains.map((d) => (\n              <div\n                key={d}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  padding: '6px 10px',\n                  borderRadius: '8px',\n                  background: colors.bgTertiary,\n                }}\n              >\n                <span style={{ fontSize: '13px', color: colors.textPrimary }}>{d}</span>\n                <button\n                  style={{ ...ghostBtn, padding: '2px 8px', color: colors.statusErrorText }}\n                  onClick={() => removeDomain(d)}\n                  type=\"button\"\n                >\n                  Remove\n                </button>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Presentation (unpublished — captured into the publish) */}\n      {!isPublished && (\n        <div style={{ marginBottom: '16px' }}>\n          <div style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary, marginBottom: '8px' }}>\n            Presentation\n          </div>\n          {presentationControls}\n        </div>\n      )}\n\n      {/* Publish CTA (unpublished) */}\n      {!isPublished && (\n        <div style={{ marginBottom: '8px' }}>\n          <label style={{ display: 'flex', gap: '8px', alignItems: 'flex-start', marginBottom: '12px' }}>\n            <input type=\"checkbox\" checked={attested} onChange={(e) => setAttested(e.target.checked)} />\n            <span style={{ fontSize: '12px', color: colors.textSecondary }}>\n              I understand this makes the dashboard&apos;s live data visible to anyone with the link, and I confirm it\n              is safe to be public.\n            </span>\n          </label>\n          <button style={primaryBtn} onClick={handlePublish} disabled={loading} type=\"button\">\n            {loading ? 'Publishing…' : 'Publish to web'}\n          </button>\n        </div>\n      )}\n\n      {/* Embed snippet + management (published) */}\n      {isPublished && (\n        <>\n          {iframeSnippet ? (\n            <div style={{ marginBottom: '16px' }}>\n              <div style={{ marginBottom: '6px' }}>\n                <span style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary }}>Embed snippet</span>\n              </div>\n              <textarea\n                readOnly\n                value={iframeSnippet}\n                style={{\n                  width: '100%',\n                  minHeight: '96px',\n                  padding: '10px',\n                  borderRadius: '8px',\n                  border: `1px solid ${colors.borderDefault}`,\n                  background: colors.bgSecondary,\n                  color: colors.textPrimary,\n                  fontFamily: 'monospace',\n                  fontSize: '12px',\n                  resize: 'vertical',\n                }}\n              />\n              <button style={{ ...ghostBtn, marginTop: '8px' }} onClick={() => handleCopy(iframeSnippet)} type=\"button\">\n                {copied ? 'Copied ✓' : 'Copy snippet'}\n              </button>\n            </div>\n          ) : (\n            <div\n              style={{\n                fontSize: '12px',\n                color: colors.textSecondary,\n                background: colors.bgSecondary,\n                borderRadius: '8px',\n                padding: '10px 12px',\n                marginBottom: '16px',\n              }}\n            >\n              The embed link is already active. For security the snippet (which contains the secret key) is only shown\n              once at publish time — use <strong>Rotate link</strong> to generate a fresh snippet.\n            </div>\n          )}\n\n          {/* Presentation (published — persisted + re-published to take effect) */}\n          <div style={{ marginBottom: '16px' }}>\n            <div style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary, marginBottom: '8px' }}>\n              Presentation\n            </div>\n            {presentationControls}\n            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginTop: '10px' }}>\n              <button style={ghostBtn} onClick={handleApplyPresentation} disabled={loading} type=\"button\">\n                {loading ? 'Applying…' : 'Apply changes'}\n              </button>\n              {presentationSaved && <span style={{ fontSize: '12px', color: colors.textTertiary }}>Updated ✓</span>}\n            </div>\n            <div style={{ fontSize: '11px', color: colors.textTertiary, marginTop: '6px' }}>\n              Changes apply to live embeds within a few seconds — no re-publish needed, and the embed link stays the\n              same.\n            </div>\n          </div>\n\n          <div style={{ display: 'flex', gap: '8px' }}>\n            <button style={ghostBtn} onClick={() => policy && rotateKey(policy.id)} disabled={loading} type=\"button\">\n              Rotate link\n            </button>\n            <button\n              style={{ ...ghostBtn, color: colors.statusErrorText, borderColor: colors.statusErrorText }}\n              onClick={() => {\n                if (\n                  policy &&\n                  window.confirm(\n                    'Unpublish this dashboard? The embed will stop working immediately for anyone using the link.'\n                  )\n                ) {\n                  void unpublish(policy.id);\n                }\n              }}\n              disabled={loading}\n              type=\"button\"\n            >\n              Unpublish\n            </button>\n          </div>\n        </>\n      )}\n\n      {(localError || error) && (\n        <div style={{ marginTop: '12px', fontSize: '12px', color: colors.statusErrorText }}>\n          {localError ?? error?.message}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default EmbedTab;\n"],"mappings":"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"}
+{"version":3,"file":"EmbedTab.js","names":[],"sources":["../../../../../src/bigconsole/components/dashboard/ShareDialog/EmbedTab.tsx"],"sourcesContent":["/**\n * EmbedTab — \"Publish to web\" section of the dashboard Share dialog.\n *\n * Owner-facing UI to publish a dashboard as an anonymous-link embed serving LIVE\n * data, manage the allowed parent domains, copy the iframe snippet, rotate the\n * link key, and unpublish. Backed by {@link useDashboardEmbedPolicy}; all\n * mutations are gateway-enforced by `@rbac(manage_embed)` (owner-only).\n *\n * Self-contained (inline styles driven by the dialog's `colors`) so it slots into\n * the existing hand-styled ShareDialog without a broader refactor.\n */\n\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useDashboardEmbedPolicy, themeChoiceFromPolicy } from '../../../hooks/useDashboardEmbedPolicy';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../../constants/permissions';\n\ninterface DialogColors {\n  bgPrimary: string;\n  bgSecondary: string;\n  bgTertiary: string;\n  textPrimary: string;\n  textSecondary: string;\n  textTertiary: string;\n  borderDefault: string;\n  actionPrimaryBg: string;\n  actionPrimaryBgHover: string;\n  statusSuccessBg: string;\n  statusErrorText: string;\n}\n\nexport interface EmbedTabProps {\n  dashboardId: string;\n  colors: DialogColors;\n}\n\n/** Embed color-mode baked into the iframe URL (BOFF-5734). */\ntype EmbedSnippetTheme = 'light' | 'dark' | 'auto';\n\nconst THEME_OPTIONS: ReadonlyArray<{ value: EmbedSnippetTheme; label: string }> = [\n  { value: 'light', label: 'Light' },\n  { value: 'dark', label: 'Dark' },\n  { value: 'auto', label: 'Auto (match viewer)' },\n];\n\n/**\n * Bake the chosen color mode into an iframe snippet by adding `?theme=` to its\n * `src` URL. `light` is the default and is left implicit so existing/plain\n * snippets stay unchanged. The secret `#key=` fragment is preserved untouched.\n *\n * Inserted via string splicing (before the fragment) rather than `URL`/\n * `URLSearchParams`, which re-serialize ALL params and could subtly re-encode\n * existing ones (e.g. `%20` → `+`). `theme` is a fixed enum, so no encoding is\n * needed; every other part of the URL is passed through byte-for-byte.\n */\nexport function withThemeInSnippet(snippet: string, theme: EmbedSnippetTheme): string {\n  if (theme === 'light') return snippet;\n  // Require whitespace before `src` so we match the real attribute, never a\n  // substring like `data-src`/`srcdoc` (the snippet is backend-generated with\n  // each attribute on its own indented line).\n  return snippet.replace(/(?<=\\s)src=\"([^\"]*)\"/, (_match, url: string) => {\n    const hashIdx = url.indexOf('#');\n    const base = hashIdx === -1 ? url : url.slice(0, hashIdx);\n    const fragment = hashIdx === -1 ? '' : url.slice(hashIdx);\n    const sep = base.includes('?') ? '&' : '?';\n    return `src=\"${base}${sep}theme=${theme}${fragment}\"`;\n  });\n}\n\n/** Validate an exact https origin (matches the backend allowlist rules). */\nfunction normalizeOrigin(raw: string): string | null {\n  const trimmed = raw.trim();\n  if (!trimmed) return null;\n  try {\n    const url = new URL(trimmed);\n    if (url.protocol !== 'https:') return null;\n    if ((url.pathname !== '' && url.pathname !== '/') || url.search || url.hash) return null;\n    return url.origin;\n  } catch {\n    return null;\n  }\n}\n\nexport function EmbedTab({ dashboardId, colors }: EmbedTabProps) {\n  const {\n    policy,\n    secret,\n    loading,\n    error,\n    fetchPolicy,\n    publishToWeb,\n    applyPresentation,\n    setAllowedOrigins,\n    rotateKey,\n    unpublish,\n  } = useDashboardEmbedPolicy();\n\n  // All embed policy mutations (publish, rotate, revoke, set-origins, apply\n  // presentation) are gateway-enforced by `@rbac(manage_embed)`. Gate the UI on\n  // the same permission so the controls degrade gracefully instead of erroring.\n  const { hasPermission } = usePermissions();\n  const canManageEmbed = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_MANAGE_EMBED);\n\n  const [domainInput, setDomainInput] = useState('');\n  const [pendingDomains, setPendingDomains] = useState<string[]>([]);\n  const [attested, setAttested] = useState(false);\n  const [copied, setCopied] = useState(false);\n  // Presentation options (BOFF-5735). Defaults mirror the backend column defaults\n  // so a fresh publish captures a sensible look without extra clicks.\n  const [theme, setTheme] = useState<EmbedSnippetTheme>('light');\n  const [showTitle, setShowTitle] = useState(false);\n  const [showBranding, setShowBranding] = useState(true);\n  const [presentationSaved, setPresentationSaved] = useState(false);\n  const [localError, setLocalError] = useState<string | null>(null);\n  // Only seed the presentation controls once per policy identity — NOT on every\n  // `policy` object change. Otherwise an unrelated mutation (e.g. adding a domain\n  // via setAllowedOrigins) would return a fresh policy object and clobber the\n  // owner's in-progress, not-yet-applied theme/title/branding edits.\n  const syncedPolicyIdRef = useRef<string | null>(null);\n  const savedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (dashboardId) fetchPolicy(dashboardId);\n  }, [dashboardId, fetchPolicy]);\n\n  // Reflect the persisted presentation the first time each policy loads.\n  useEffect(() => {\n    if (!policy || syncedPolicyIdRef.current === policy.id) return;\n    syncedPolicyIdRef.current = policy.id;\n    setTheme(themeChoiceFromPolicy(policy.presentationTheme));\n    setShowTitle(policy.showDashboardTitle);\n    setShowBranding(policy.showBrandingFooter);\n  }, [policy]);\n\n  // Clear any pending \"Updated ✓\" timer on unmount.\n  useEffect(\n    () => () => {\n      if (savedTimerRef.current) clearTimeout(savedTimerRef.current);\n    },\n    []\n  );\n\n  const isPublished = policy?.status === 'ACTIVE';\n  const domains = isPublished ? (policy?.allowedParentOrigins ?? []) : pendingDomains;\n\n  // The copyable iframe snippet: from the one-time secret if present (fresh\n  // publish/rotate), else reconstructed from the locator for an already-published\n  // policy (the fragment key is only available in the one-time secret).\n  const iframeSnippet = useMemo(() => {\n    if (secret?.iframeSnippet) return withThemeInSnippet(secret.iframeSnippet, theme);\n    return null;\n  }, [secret, theme]);\n\n  const addDomain = () => {\n    setLocalError(null);\n    const origin = normalizeOrigin(domainInput);\n    if (!origin) {\n      setLocalError('Enter a valid https origin, e.g. https://example.com');\n      return;\n    }\n    if (domains.includes(origin)) {\n      setDomainInput('');\n      return;\n    }\n    if (isPublished && policy) {\n      void setAllowedOrigins(policy.id, [...domains, origin]);\n    } else {\n      setPendingDomains((prev) => [...prev, origin]);\n    }\n    setDomainInput('');\n  };\n\n  const removeDomain = (origin: string) => {\n    if (isPublished && policy) {\n      void setAllowedOrigins(\n        policy.id,\n        domains.filter((d) => d !== origin)\n      );\n    } else {\n      setPendingDomains((prev) => prev.filter((d) => d !== origin));\n    }\n  };\n\n  const handlePublish = async () => {\n    setLocalError(null);\n    if (pendingDomains.length === 0) {\n      setLocalError('Add at least one allowed website domain before publishing.');\n      return;\n    }\n    if (!attested) {\n      setLocalError('Please confirm this dashboard is safe to be public.');\n      return;\n    }\n    await publishToWeb(dashboardId, pendingDomains, true, { theme, showTitle, showBranding });\n  };\n\n  const handleApplyPresentation = async () => {\n    if (!policy) return;\n    setLocalError(null);\n    const updated = await applyPresentation(policy.id, { theme, showTitle, showBranding });\n    if (updated) {\n      setPresentationSaved(true);\n      // Clear any in-flight timer so rapid re-clicks don't hide the confirmation early.\n      if (savedTimerRef.current) clearTimeout(savedTimerRef.current);\n      savedTimerRef.current = setTimeout(() => setPresentationSaved(false), 1500);\n    }\n  };\n\n  const handleCopy = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch {\n      setLocalError('Could not copy — select and copy manually.');\n    }\n  };\n\n  const primaryBtn: React.CSSProperties = {\n    padding: '8px 14px',\n    borderRadius: '8px',\n    border: 'none',\n    background: colors.actionPrimaryBg,\n    color: '#fff',\n    fontSize: '13px',\n    fontWeight: 600,\n    cursor: 'pointer',\n  };\n  const ghostBtn: React.CSSProperties = {\n    padding: '8px 14px',\n    borderRadius: '8px',\n    border: `1px solid ${colors.borderDefault}`,\n    background: 'transparent',\n    color: colors.textPrimary,\n    fontSize: '13px',\n    cursor: 'pointer',\n  };\n  const inputStyle: React.CSSProperties = {\n    flex: 1,\n    padding: '8px 10px',\n    borderRadius: '8px',\n    border: `1px solid ${colors.borderDefault}`,\n    background: colors.bgSecondary,\n    color: colors.textPrimary,\n    fontSize: '13px',\n  };\n  const selectStyle: React.CSSProperties = {\n    padding: '4px 8px',\n    borderRadius: '6px',\n    border: `1px solid ${colors.borderDefault}`,\n    background: colors.bgSecondary,\n    color: colors.textPrimary,\n    fontSize: '12px',\n    cursor: 'pointer',\n  };\n  const toggleRow: React.CSSProperties = {\n    display: 'flex',\n    gap: '8px',\n    alignItems: 'flex-start',\n    fontSize: '12px',\n    color: colors.textSecondary,\n  };\n\n  // Presentation controls (BOFF-5735) — shared by the pre-publish and published\n  // states. Local state drives both the persisted policy and the snippet `?theme=`.\n  const presentationControls = (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>\n      <label style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>\n        <span style={{ fontSize: '12px', color: colors.textSecondary }}>Theme</span>\n        <select\n          value={theme}\n          onChange={(e) => {\n            // The options are fixed, but narrow instead of casting so an\n            // unexpected value can never slip into state.\n            const value = e.target.value;\n            if (value === 'light' || value === 'dark' || value === 'auto') {\n              setTheme(value);\n            }\n          }}\n          style={selectStyle}\n        >\n          {THEME_OPTIONS.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n      </label>\n      <label style={toggleRow}>\n        <input type=\"checkbox\" checked={showTitle} onChange={(e) => setShowTitle(e.target.checked)} />\n        <span>Show the dashboard title as a header</span>\n      </label>\n      <label style={toggleRow}>\n        <input type=\"checkbox\" checked={showBranding} onChange={(e) => setShowBranding(e.target.checked)} />\n        <span>Show a subtle “Powered by BigConsole” footer</span>\n      </label>\n    </div>\n  );\n\n  return (\n    <div style={{ padding: '20px 24px' }}>\n      {/* Status banner */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: '12px 14px',\n          borderRadius: '10px',\n          background: colors.bgSecondary,\n          marginBottom: '16px',\n        }}\n      >\n        <div>\n          <div style={{ fontSize: '14px', fontWeight: 600, color: colors.textPrimary }}>Publish to the web</div>\n          <div style={{ fontSize: '12px', color: colors.textSecondary, marginTop: '2px' }}>\n            {isPublished\n              ? 'This dashboard is live. Anyone with the link on an allowed website sees its live data.'\n              : 'Embed this dashboard on your website. Viewers see live data — no login required.'}\n          </div>\n        </div>\n        <span\n          style={{\n            fontSize: '11px',\n            fontWeight: 700,\n            padding: '3px 8px',\n            borderRadius: '999px',\n            color: '#fff',\n            background: isPublished ? colors.statusSuccessBg : colors.textTertiary,\n          }}\n        >\n          {isPublished ? 'PUBLISHED' : 'PRIVATE'}\n        </span>\n      </div>\n\n      {/* Allowed domains */}\n      <div style={{ marginBottom: '16px' }}>\n        <div style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary, marginBottom: '6px' }}>\n          Allowed website domains\n        </div>\n        <div style={{ display: 'flex', gap: '8px', marginBottom: '8px' }}>\n          <input\n            style={inputStyle}\n            placeholder=\"https://yoursite.com\"\n            value={domainInput}\n            onChange={(e) => setDomainInput(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') addDomain();\n            }}\n          />\n          <button style={ghostBtn} onClick={addDomain} type=\"button\" disabled={!canManageEmbed}>\n            Add\n          </button>\n        </div>\n        {domains.length === 0 ? (\n          <div style={{ fontSize: '12px', color: colors.textTertiary }}>\n            No domains yet. Only listed https domains may frame this dashboard.\n          </div>\n        ) : (\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>\n            {domains.map((d) => (\n              <div\n                key={d}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  padding: '6px 10px',\n                  borderRadius: '8px',\n                  background: colors.bgTertiary,\n                }}\n              >\n                <span style={{ fontSize: '13px', color: colors.textPrimary }}>{d}</span>\n                {canManageEmbed && (\n                  <button\n                    style={{ ...ghostBtn, padding: '2px 8px', color: colors.statusErrorText }}\n                    onClick={() => removeDomain(d)}\n                    type=\"button\"\n                  >\n                    Remove\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Presentation (unpublished — captured into the publish) */}\n      {!isPublished && (\n        <div style={{ marginBottom: '16px' }}>\n          <div style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary, marginBottom: '8px' }}>\n            Presentation\n          </div>\n          {presentationControls}\n        </div>\n      )}\n\n      {/* Publish CTA (unpublished) */}\n      {!isPublished && (\n        <div style={{ marginBottom: '8px' }}>\n          <label style={{ display: 'flex', gap: '8px', alignItems: 'flex-start', marginBottom: '12px' }}>\n            <input type=\"checkbox\" checked={attested} onChange={(e) => setAttested(e.target.checked)} />\n            <span style={{ fontSize: '12px', color: colors.textSecondary }}>\n              I understand this makes the dashboard&apos;s live data visible to anyone with the link, and I confirm it\n              is safe to be public.\n            </span>\n          </label>\n          <button style={primaryBtn} onClick={handlePublish} disabled={loading || !canManageEmbed} type=\"button\">\n            {loading ? 'Publishing…' : 'Publish to web'}\n          </button>\n        </div>\n      )}\n\n      {/* Embed snippet + management (published) */}\n      {isPublished && (\n        <>\n          {iframeSnippet ? (\n            <div style={{ marginBottom: '16px' }}>\n              <div style={{ marginBottom: '6px' }}>\n                <span style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary }}>Embed snippet</span>\n              </div>\n              <textarea\n                readOnly\n                value={iframeSnippet}\n                style={{\n                  width: '100%',\n                  minHeight: '96px',\n                  padding: '10px',\n                  borderRadius: '8px',\n                  border: `1px solid ${colors.borderDefault}`,\n                  background: colors.bgSecondary,\n                  color: colors.textPrimary,\n                  fontFamily: 'monospace',\n                  fontSize: '12px',\n                  resize: 'vertical',\n                }}\n              />\n              <button style={{ ...ghostBtn, marginTop: '8px' }} onClick={() => handleCopy(iframeSnippet)} type=\"button\">\n                {copied ? 'Copied ✓' : 'Copy snippet'}\n              </button>\n            </div>\n          ) : (\n            <div\n              style={{\n                fontSize: '12px',\n                color: colors.textSecondary,\n                background: colors.bgSecondary,\n                borderRadius: '8px',\n                padding: '10px 12px',\n                marginBottom: '16px',\n              }}\n            >\n              The embed link is already active. For security the snippet (which contains the secret key) is only shown\n              once at publish time — use <strong>Rotate link</strong> to generate a fresh snippet.\n            </div>\n          )}\n\n          {/* Presentation (published — persisted + re-published to take effect) */}\n          <div style={{ marginBottom: '16px' }}>\n            <div style={{ fontSize: '12px', fontWeight: 600, color: colors.textSecondary, marginBottom: '8px' }}>\n              Presentation\n            </div>\n            {presentationControls}\n            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginTop: '10px' }}>\n              <button\n                style={ghostBtn}\n                onClick={handleApplyPresentation}\n                disabled={loading || !canManageEmbed}\n                type=\"button\"\n              >\n                {loading ? 'Applying…' : 'Apply changes'}\n              </button>\n              {presentationSaved && <span style={{ fontSize: '12px', color: colors.textTertiary }}>Updated ✓</span>}\n            </div>\n            <div style={{ fontSize: '11px', color: colors.textTertiary, marginTop: '6px' }}>\n              Changes apply to live embeds within a few seconds — no re-publish needed, and the embed link stays the\n              same.\n            </div>\n          </div>\n\n          {/* Rotate/Unpublish are destructive management actions — hide entirely\n              when the caller can't manage the embed. */}\n          {canManageEmbed && (\n            <div style={{ display: 'flex', gap: '8px' }}>\n              <button style={ghostBtn} onClick={() => policy && rotateKey(policy.id)} disabled={loading} type=\"button\">\n                Rotate link\n              </button>\n              <button\n                style={{ ...ghostBtn, color: colors.statusErrorText, borderColor: colors.statusErrorText }}\n                onClick={() => {\n                  if (\n                    policy &&\n                    window.confirm(\n                      'Unpublish this dashboard? The embed will stop working immediately for anyone using the link.'\n                    )\n                  ) {\n                    void unpublish(policy.id);\n                  }\n                }}\n                disabled={loading}\n                type=\"button\"\n              >\n                Unpublish\n              </button>\n            </div>\n          )}\n        </>\n      )}\n\n      {(localError || error) && (\n        <div style={{ marginTop: '12px', fontSize: '12px', color: colors.statusErrorText }}>\n          {localError ?? error?.message}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default EmbedTab;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/DataSinkCard.js

@@ -3,23 +3,23 @@ import { memo as t, useCallback as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { formatDistanceToNow as a } from "date-fns";
 //#region src/bigconsole/components/datasink/DataSinkCard.tsx
-var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh: l, onExport: u, onDelete: d, onContinueSetup: f }) {
-	let p = n((e) => {
+var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh: l, onExport: u, onDelete: d, onContinueSetup: f, canEdit: p = !0, canRefresh: m = !0, canDelete: h = !0 }) {
+	let g = n((e) => {
 		e.stopPropagation(), s?.(t.id);
-	}, [t.id, s]), m = n((e) => {
+	}, [t.id, s]), _ = n((e) => {
 		e.stopPropagation(), c?.(t.id);
-	}, [t.id, c]), h = n((e) => {
+	}, [t.id, c]), v = n((e) => {
 		e.stopPropagation(), l?.(t.id);
-	}, [t.id, l]), g = n((e) => {
+	}, [t.id, l]), y = n((e) => {
 		e.stopPropagation(), u?.(t.id);
-	}, [t.id, u]), _ = n((e) => {
+	}, [t.id, u]), b = n((e) => {
 		e.stopPropagation(), d?.(t.id);
-	}, [t.id, d]), v = n((e) => {
+	}, [t.id, d]), x = n((e) => {
 		e.stopPropagation(), f?.(t.id);
-	}, [t.id, f]), y = (o ?? t.setupState) === "completed", b = t.lastRefreshedAt ? a(new Date(t.lastRefreshedAt), { addSuffix: !0 }) : "Never";
+	}, [t.id, f]), S = (o ?? t.setupState) === "completed", C = t.lastRefreshedAt ? a(new Date(t.lastRefreshedAt), { addSuffix: !0 }) : "Never";
 	return /* @__PURE__ */ i("div", {
 		className: "\n        p-4\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        hover:border-action-primary-bg/50\n        transition-colors\n        cursor-pointer\n      ",
-		onClick: p,
+		onClick: g,
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex items-start justify-between mb-3",
@@ -56,7 +56,7 @@ var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh
 							strokeWidth: 2,
 							d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
 						})
-					}), b]
+					}), C]
 				}), t.linkedWorkflowCount !== void 0 && t.linkedWorkflowCount > 0 && /* @__PURE__ */ i("span", {
 					className: "flex items-center gap-1",
 					children: [
@@ -78,7 +78,7 @@ var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh
 					]
 				})]
 			}),
-			!y && /* @__PURE__ */ r("div", {
+			!S && /* @__PURE__ */ r("div", {
 				className: "mb-3 p-2 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md",
 				children: /* @__PURE__ */ i("div", {
 					className: "flex items-center justify-between",
@@ -87,7 +87,7 @@ var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh
 						children: "Setup incomplete"
 					}), /* @__PURE__ */ r("button", {
 						type: "button",
-						onClick: v,
+						onClick: x,
 						className: "text-xs font-medium text-action-primary-bg hover:underline",
 						children: "Continue"
 					})]
@@ -98,31 +98,31 @@ var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh
 				children: [
 					/* @__PURE__ */ r("button", {
 						type: "button",
-						onClick: p,
+						onClick: g,
 						className: "flex-1 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors",
 						children: "View"
 					}),
-					/* @__PURE__ */ r("button", {
+					p && /* @__PURE__ */ r("button", {
 						type: "button",
-						onClick: m,
+						onClick: _,
 						className: "px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
 						children: "Edit"
 					}),
-					/* @__PURE__ */ r("button", {
+					m && /* @__PURE__ */ r("button", {
 						type: "button",
-						onClick: h,
+						onClick: v,
 						className: "px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
 						children: "Refresh"
 					}),
 					u && /* @__PURE__ */ r("button", {
 						type: "button",
-						onClick: g,
+						onClick: y,
 						className: "px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
 						children: "Export"
 					}),
-					/* @__PURE__ */ r("button", {
+					h && /* @__PURE__ */ r("button", {
 						type: "button",
-						onClick: _,
+						onClick: b,
 						className: "px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 rounded-md transition-colors",
 						children: "Delete"
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"DataSinkCard.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkCard.tsx"],"sourcesContent":["/**\n * DataSink Card\n *\n * Card component for displaying DataSink information in a list/grid view.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { DataSinkStatusBadge } from './DataSinkStatusBadge';\nimport type { DataSink, DataSinkSetupState } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkCardProps {\n  /** DataSink data */\n  dataSink: DataSink;\n  /** Setup state override */\n  setupState?: DataSinkSetupState;\n  /** Callback when view is clicked */\n  onView?: (id: string) => void;\n  /** Callback when edit is clicked */\n  onEdit?: (id: string) => void;\n  /** Callback when refresh is clicked */\n  onRefresh?: (id: string) => void;\n  /** Callback when export is clicked */\n  onExport?: (id: string) => void;\n  /** Callback when delete is clicked */\n  onDelete?: (id: string) => void;\n  /** Callback to continue setup */\n  onContinueSetup?: (id: string) => void;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkCard = memo(function DataSinkCard({\n  dataSink,\n  setupState,\n  onView,\n  onEdit,\n  onRefresh,\n  onExport,\n  onDelete,\n  onContinueSetup,\n}: DataSinkCardProps) {\n  // Event handlers\n  const handleView = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onView?.(dataSink.id);\n    },\n    [dataSink.id, onView]\n  );\n\n  const handleEdit = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(dataSink.id);\n    },\n    [dataSink.id, onEdit]\n  );\n\n  const handleRefresh = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onRefresh?.(dataSink.id);\n    },\n    [dataSink.id, onRefresh]\n  );\n\n  const handleExport = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExport?.(dataSink.id);\n    },\n    [dataSink.id, onExport]\n  );\n\n  const handleDelete = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(dataSink.id);\n    },\n    [dataSink.id, onDelete]\n  );\n\n  const handleContinueSetup = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onContinueSetup?.(dataSink.id);\n    },\n    [dataSink.id, onContinueSetup]\n  );\n\n  const currentSetupState = setupState ?? dataSink.setupState;\n  const isSetupComplete = currentSetupState === 'completed';\n\n  // Format last refreshed time\n  const lastRefreshedText = dataSink.lastRefreshedAt\n    ? formatDistanceToNow(new Date(dataSink.lastRefreshedAt), { addSuffix: true })\n    : 'Never';\n\n  return (\n    <div\n      className={`\n        p-4\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        hover:border-action-primary-bg/50\n        transition-colors\n        cursor-pointer\n      `}\n      onClick={handleView}\n    >\n      {/* Header */}\n      <div className=\"flex items-start justify-between mb-3\">\n        <div className=\"flex-1 min-w-0\">\n          <h3 className=\"text-sm font-semibold text-text-primary truncate\">{dataSink.name || 'Untitled DataSink'}</h3>\n          <p className=\"text-xs text-text-secondary font-mono mt-0.5 truncate\">{dataSink.key}</p>\n        </div>\n        <DataSinkStatusBadge status={dataSink.status} size=\"sm\" />\n      </div>\n\n      {/* Description */}\n      {dataSink.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{dataSink.description}</p>}\n\n      {/* Stats */}\n      <div className=\"flex items-center gap-4 text-xs text-text-secondary mb-3\">\n        <span className=\"flex items-center gap-1\">\n          <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          {lastRefreshedText}\n        </span>\n        {dataSink.linkedWorkflowCount !== undefined && dataSink.linkedWorkflowCount > 0 && (\n          <span className=\"flex items-center gap-1\">\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n              />\n            </svg>\n            {dataSink.linkedWorkflowCount} workflow{dataSink.linkedWorkflowCount !== 1 ? 's' : ''}\n          </span>\n        )}\n      </div>\n\n      {/* Setup state indicator */}\n      {!isSetupComplete && (\n        <div className=\"mb-3 p-2 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-xs text-status-warning-text\">Setup incomplete</span>\n            <button\n              type=\"button\"\n              onClick={handleContinueSetup}\n              className=\"text-xs font-medium text-action-primary-bg hover:underline\"\n            >\n              Continue\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2 pt-2 border-t border-border-default\">\n        <button\n          type=\"button\"\n          onClick={handleView}\n          className=\"flex-1 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n        >\n          View\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleEdit}\n          className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n        >\n          Edit\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleRefresh}\n          className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n        >\n          Refresh\n        </button>\n        {onExport && (\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            Export\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleDelete}\n          className=\"px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 rounded-md transition-colors\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkCard;\n"],"mappings":"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"}
+{"version":3,"file":"DataSinkCard.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkCard.tsx"],"sourcesContent":["/**\n * DataSink Card\n *\n * Card component for displaying DataSink information in a list/grid view.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { DataSinkStatusBadge } from './DataSinkStatusBadge';\nimport type { DataSink, DataSinkSetupState } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkCardProps {\n  /** DataSink data */\n  dataSink: DataSink;\n  /** Setup state override */\n  setupState?: DataSinkSetupState;\n  /** Callback when view is clicked */\n  onView?: (id: string) => void;\n  /** Callback when edit is clicked */\n  onEdit?: (id: string) => void;\n  /** Callback when refresh is clicked */\n  onRefresh?: (id: string) => void;\n  /** Callback when export is clicked */\n  onExport?: (id: string) => void;\n  /** Callback when delete is clicked */\n  onDelete?: (id: string) => void;\n  /** Callback to continue setup */\n  onContinueSetup?: (id: string) => void;\n  /** Whether the current actor may edit this DataSink (gates the Edit action). Defaults to true. */\n  canEdit?: boolean;\n  /** Whether the current actor may refresh this DataSink (gates the Refresh action). Defaults to true. */\n  canRefresh?: boolean;\n  /** Whether the current actor may delete this DataSink (gates the Delete action). Defaults to true. */\n  canDelete?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkCard = memo(function DataSinkCard({\n  dataSink,\n  setupState,\n  onView,\n  onEdit,\n  onRefresh,\n  onExport,\n  onDelete,\n  onContinueSetup,\n  canEdit = true,\n  canRefresh = true,\n  canDelete = true,\n}: DataSinkCardProps) {\n  // Event handlers\n  const handleView = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onView?.(dataSink.id);\n    },\n    [dataSink.id, onView]\n  );\n\n  const handleEdit = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(dataSink.id);\n    },\n    [dataSink.id, onEdit]\n  );\n\n  const handleRefresh = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onRefresh?.(dataSink.id);\n    },\n    [dataSink.id, onRefresh]\n  );\n\n  const handleExport = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExport?.(dataSink.id);\n    },\n    [dataSink.id, onExport]\n  );\n\n  const handleDelete = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(dataSink.id);\n    },\n    [dataSink.id, onDelete]\n  );\n\n  const handleContinueSetup = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onContinueSetup?.(dataSink.id);\n    },\n    [dataSink.id, onContinueSetup]\n  );\n\n  const currentSetupState = setupState ?? dataSink.setupState;\n  const isSetupComplete = currentSetupState === 'completed';\n\n  // Format last refreshed time\n  const lastRefreshedText = dataSink.lastRefreshedAt\n    ? formatDistanceToNow(new Date(dataSink.lastRefreshedAt), { addSuffix: true })\n    : 'Never';\n\n  return (\n    <div\n      className={`\n        p-4\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        hover:border-action-primary-bg/50\n        transition-colors\n        cursor-pointer\n      `}\n      onClick={handleView}\n    >\n      {/* Header */}\n      <div className=\"flex items-start justify-between mb-3\">\n        <div className=\"flex-1 min-w-0\">\n          <h3 className=\"text-sm font-semibold text-text-primary truncate\">{dataSink.name || 'Untitled DataSink'}</h3>\n          <p className=\"text-xs text-text-secondary font-mono mt-0.5 truncate\">{dataSink.key}</p>\n        </div>\n        <DataSinkStatusBadge status={dataSink.status} size=\"sm\" />\n      </div>\n\n      {/* Description */}\n      {dataSink.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{dataSink.description}</p>}\n\n      {/* Stats */}\n      <div className=\"flex items-center gap-4 text-xs text-text-secondary mb-3\">\n        <span className=\"flex items-center gap-1\">\n          <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          {lastRefreshedText}\n        </span>\n        {dataSink.linkedWorkflowCount !== undefined && dataSink.linkedWorkflowCount > 0 && (\n          <span className=\"flex items-center gap-1\">\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n              />\n            </svg>\n            {dataSink.linkedWorkflowCount} workflow{dataSink.linkedWorkflowCount !== 1 ? 's' : ''}\n          </span>\n        )}\n      </div>\n\n      {/* Setup state indicator */}\n      {!isSetupComplete && (\n        <div className=\"mb-3 p-2 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-xs text-status-warning-text\">Setup incomplete</span>\n            <button\n              type=\"button\"\n              onClick={handleContinueSetup}\n              className=\"text-xs font-medium text-action-primary-bg hover:underline\"\n            >\n              Continue\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2 pt-2 border-t border-border-default\">\n        <button\n          type=\"button\"\n          onClick={handleView}\n          className=\"flex-1 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n        >\n          View\n        </button>\n        {canEdit && (\n          <button\n            type=\"button\"\n            onClick={handleEdit}\n            className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            Edit\n          </button>\n        )}\n        {canRefresh && (\n          <button\n            type=\"button\"\n            onClick={handleRefresh}\n            className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            Refresh\n          </button>\n        )}\n        {onExport && (\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            Export\n          </button>\n        )}\n        {canDelete && (\n          <button\n            type=\"button\"\n            onClick={handleDelete}\n            className=\"px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 rounded-md transition-colors\"\n          >\n            Delete\n          </button>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkCard;\n"],"mappings":";;;;;AA4CA,IAAa,IAAe,EAAK,SAAsB,EACrD,aACA,eACA,WACA,WACA,cACA,aACA,aACA,oBACA,aAAU,IACV,gBAAa,IACb,eAAY,MACQ;CAEpB,IAAM,IAAa,GAChB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAS,EAAS,GAAG;IAEvB,CAAC,EAAS,IAAI,EAAO,CACtB,EAEK,IAAa,GAChB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAS,EAAS,GAAG;IAEvB,CAAC,EAAS,IAAI,EAAO,CACtB,EAEK,IAAgB,GACnB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAY,EAAS,GAAG;IAE1B,CAAC,EAAS,IAAI,EAAU,CACzB,EAEK,IAAe,GAClB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAW,EAAS,GAAG;IAEzB,CAAC,EAAS,IAAI,EAAS,CACxB,EAEK,IAAe,GAClB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAW,EAAS,GAAG;IAEzB,CAAC,EAAS,IAAI,EAAS,CACxB,EAEK,IAAsB,GACzB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAkB,EAAS,GAAG;IAEhC,CAAC,EAAS,IAAI,EAAgB,CAC/B,EAGK,KADoB,KAAc,EAAS,gBACH,aAGxC,IAAoB,EAAS,kBAC/B,EAAoB,IAAI,KAAK,EAAS,gBAAgB,EAAE,EAAE,WAAW,IAAM,CAAC,GAC5E;AAEJ,QACE,kBAAC,OAAD;EACE,WAAW;EASX,SAAS;YAVX;GAaE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAoD,EAAS,QAAQ;MAAyB,CAAA,EAC5G,kBAAC,KAAD;MAAG,WAAU;gBAAyD,EAAS;MAAQ,CAAA,CACnF;QACN,kBAAC,GAAD;KAAqB,QAAQ,EAAS;KAAQ,MAAK;KAAO,CAAA,CACtD;;GAGL,EAAS,eAAe,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAS;IAAgB,CAAA;GAGhH,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,OAAD;MAAK,WAAU;MAAc,MAAK;MAAO,QAAO;MAAe,SAAQ;gBACrE,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA,EACL,EACI;QACN,EAAS,wBAAwB,KAAA,KAAa,EAAS,sBAAsB,KAC5E,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACE,kBAAC,OAAD;OAAK,WAAU;OAAc,MAAK;OAAO,QAAO;OAAe,SAAQ;iBACrE,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACL,EAAS;MAAoB;MAAU,EAAS,wBAAwB,IAAU,KAAN;MACxE;OAEL;;GAGL,CAAC,KACA,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAmC;MAAuB,CAAA,EAC1E,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA,CACL;;IACF,CAAA;GAIR,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KACR,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KAEV,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KAEV,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KAEV,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KAEP;;GACF;;EAER"}

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

@@ -1,66 +1,233 @@
-import { memo as e } from "react";
-import { ArrowRight as t, Upload as n, Workflow as r } from "lucide-react";
-import { Button as i, Dialog as a, DialogContent as o, DialogDescription as s, DialogFooter as c, DialogHeader as l, DialogTitle as u } from "@burdenoff/fe-libs/ui";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { parseCsv as e } from "../../utils/csv.js";
+import { memo as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { AlertTriangle as o, ArrowRight as s, FileUp as c, Loader2 as l, Upload as u, Workflow as d } from "lucide-react";
+import { Button as f, Dialog as p, DialogContent as m, DialogDescription as h, DialogFooter as g, DialogHeader as _, DialogTitle as v } from "@burdenoff/fe-libs/ui";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/ImportDataGuideDialog.tsx
-var p = [
-	"Go to the Workflows page and create a new workflow.",
-	"Add a source node to fetch your data, then a node that writes to this data sink.",
-	"Run the workflow — the imported data appears here in the data preview."
-], m = e(function({ isOpen: e, dataSinkName: m, onClose: h, onGoToWorkflows: g }) {
-	return /* @__PURE__ */ d(a, {
-		open: e,
-		onOpenChange: (e) => !e && h(),
-		children: /* @__PURE__ */ f(o, {
+var S = 6, C = 1e7, w = 5e4, T = t(function({ isOpen: t, dataSinkName: T, hasExistingData: E, onClose: D, onGoToWorkflows: O, onImportCsv: k }) {
+	let A = i(null), j = i(0), [M, N] = a(null), [P, F] = a(null), [I, L] = a(null), [R, z] = a(null), [B, V] = a(!1), H = n(() => {
+		j.current += 1, N(null), F(null), L(null), z(null), V(!1);
+	}, []);
+	r(() => {
+		t || H();
+	}, [t, H]);
+	let U = n(async (t) => {
+		let n = t.target.files?.[0];
+		if (t.target.value = "", !n) return;
+		let r = j.current += 1;
+		if (F(null), L(null), z(null), N(n.name), n.size > C) {
+			L("This CSV is larger than 10 MB. Import large datasets with a workflow instead.");
+			return;
+		}
+		try {
+			let t = await n.text();
+			if (r !== j.current) return;
+			let i = e(t);
+			if (i.rows.length > w) {
+				L(`This CSV has ${i.rows.length.toLocaleString()} rows (limit ${w.toLocaleString()}). Import large datasets with a workflow instead.`);
+				return;
+			}
+			F(i);
+		} catch (e) {
+			if (r !== j.current) return;
+			F(null), L(e instanceof Error ? e.message : "Failed to parse the CSV file.");
+		}
+	}, []), W = n(async () => {
+		if (!(!P || !k)) {
+			V(!0), z(null);
+			try {
+				await k(P.rows) ? D() : z("Import failed. Please try again.");
+			} catch (e) {
+				z(e instanceof Error ? e.message : "Import failed. Please try again.");
+			} finally {
+				V(!1);
+			}
+		}
+	}, [
+		P,
+		k,
+		D
+	]), G = n(() => A.current?.click(), []), K = P?.columns.slice(0, S) ?? [], q = P ? P.columns.length - K.length : 0;
+	return /* @__PURE__ */ b(p, {
+		open: t,
+		onOpenChange: (e) => !e && !B && D(),
+		children: /* @__PURE__ */ x(m, {
 			className: "sm:max-w-lg",
 			children: [
-				/* @__PURE__ */ f(l, { children: [/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ x(_, { children: [/* @__PURE__ */ x("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ b("div", {
 						className: "flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
-						children: /* @__PURE__ */ d(n, { className: "size-5 text-action-primary-bg" })
-					}), /* @__PURE__ */ d(u, { children: "Import data" })]
-				}), /* @__PURE__ */ d(s, { children: m ? `Populate “${m}” with a workflow` : "Populate this data sink with a workflow" })] }),
-				/* @__PURE__ */ f("div", {
-					className: "py-2 space-y-4",
-					children: [/* @__PURE__ */ f("p", {
-						className: "text-sm text-text-primary leading-relaxed",
-						children: [
-							"Data is imported into a data sink by building a ",
-							/* @__PURE__ */ d("strong", { children: "workflow" }),
-							". A workflow fetches data from your source (an API, database, file, or app) and writes it into this data sink so your dashboards can read it."
-						]
-					}), /* @__PURE__ */ d("ol", {
-						className: "space-y-3",
-						children: p.map((e, t) => /* @__PURE__ */ f("li", {
-							className: "flex items-start gap-3",
-							children: [/* @__PURE__ */ d("span", {
-								className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-semibold text-text-primary",
-								children: t + 1
-							}), /* @__PURE__ */ d("p", {
+						children: /* @__PURE__ */ b(u, { className: "size-5 text-action-primary-bg" })
+					}), /* @__PURE__ */ b(v, { children: "Import data" })]
+				}), /* @__PURE__ */ b(h, { children: T ? `Add data to “${T}”` : "Add data to this data sink" })] }),
+				/* @__PURE__ */ x("div", {
+					className: "py-2 space-y-5",
+					children: [
+						/* @__PURE__ */ x("section", {
+							className: "space-y-3",
+							children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h3", {
+								className: "text-sm font-semibold text-text-primary",
+								children: "Build a workflow"
+							}), /* @__PURE__ */ b("p", {
 								className: "text-sm text-text-secondary leading-relaxed",
-								children: e
+								children: "The recommended way to keep this data sink up to date — build a repeatable, scheduled pipeline that fetches from your source (an API, database, or app) and writes into this data sink on every run."
+							})] }), /* @__PURE__ */ x(f, {
+								variant: "default",
+								onClick: O,
+								disabled: B,
+								className: "w-full",
+								children: [
+									/* @__PURE__ */ b(d, { className: "size-4" }),
+									"Go to Workflows",
+									/* @__PURE__ */ b(s, { className: "size-4" })
+								]
 							})]
-						}, t))
-					})]
+						}),
+						k && /* @__PURE__ */ x("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ b("span", { className: "h-px flex-1 bg-border-subtle" }),
+								/* @__PURE__ */ b("span", {
+									className: "text-xs font-medium uppercase tracking-wide text-text-tertiary",
+									children: "Or"
+								}),
+								/* @__PURE__ */ b("span", { className: "h-px flex-1 bg-border-subtle" })
+							]
+						}),
+						k && /* @__PURE__ */ x("section", {
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h3", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Upload a CSV file"
+								}), /* @__PURE__ */ b("p", {
+									className: "text-sm text-text-secondary leading-relaxed",
+									children: "For a quick, one-off import, upload a spreadsheet export and it becomes available to your dashboards right away."
+								})] }),
+								E && /* @__PURE__ */ x("div", {
+									className: "flex items-start gap-2 rounded-lg border border-status-warning-border bg-status-warning-bg px-3 py-2",
+									children: [/* @__PURE__ */ b(o, { className: "size-4 shrink-0 text-status-warning-text mt-0.5" }), /* @__PURE__ */ b("p", {
+										className: "text-sm text-status-warning-text",
+										children: "This data sink already has data — importing a CSV will replace it."
+									})]
+								}),
+								/* @__PURE__ */ b("input", {
+									ref: A,
+									type: "file",
+									accept: ".csv,text/csv",
+									className: "hidden",
+									onChange: U,
+									"aria-label": "Choose a CSV file to import"
+								}),
+								!P && /* @__PURE__ */ x("button", {
+									type: "button",
+									onClick: G,
+									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",
+									children: [
+										/* @__PURE__ */ b(c, { className: "size-6 text-text-tertiary" }),
+										/* @__PURE__ */ b("span", {
+											className: "text-sm font-medium text-text-primary",
+											children: M ? "Choose a different CSV file" : "Choose a CSV file"
+										}),
+										/* @__PURE__ */ b("span", {
+											className: "text-xs text-text-tertiary",
+											children: "The first row is used as column names."
+										})
+									]
+								}),
+								I && /* @__PURE__ */ b("div", {
+									className: "rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2",
+									children: /* @__PURE__ */ b("p", {
+										className: "text-sm text-status-error-text",
+										children: I
+									})
+								}),
+								P && /* @__PURE__ */ x("div", {
+									className: "space-y-3 rounded-lg border border-border-default bg-bg-sunken p-4",
+									children: [
+										/* @__PURE__ */ x("div", {
+											className: "flex items-center justify-between gap-3",
+											children: [/* @__PURE__ */ b("span", {
+												className: "truncate text-sm font-medium text-text-primary",
+												title: M ?? void 0,
+												children: M
+											}), /* @__PURE__ */ b("button", {
+												type: "button",
+												onClick: G,
+												disabled: B,
+												className: "shrink-0 text-xs font-medium text-action-primary-bg hover:underline disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline",
+												children: "Change file"
+											})]
+										}),
+										/* @__PURE__ */ x("p", {
+											className: "text-sm text-text-secondary",
+											children: [
+												"Ready to import ",
+												/* @__PURE__ */ b("strong", {
+													className: "text-text-primary",
+													children: P.rows.length
+												}),
+												" ",
+												P.rows.length === 1 ? "row" : "rows",
+												" ×",
+												" ",
+												/* @__PURE__ */ b("strong", {
+													className: "text-text-primary",
+													children: P.columns.length
+												}),
+												" ",
+												P.columns.length === 1 ? "column" : "columns",
+												"."
+											]
+										}),
+										/* @__PURE__ */ x("div", {
+											className: "flex flex-wrap gap-1.5",
+											children: [K.map((e) => /* @__PURE__ */ b("span", {
+												className: "rounded-full bg-bg-surface px-2 py-0.5 text-xs text-text-secondary border border-border-subtle",
+												children: e
+											}, e)), q > 0 && /* @__PURE__ */ x("span", {
+												className: "rounded-full px-2 py-0.5 text-xs text-text-tertiary",
+												children: [
+													"+",
+													q,
+													" more"
+												]
+											})]
+										}),
+										R && /* @__PURE__ */ b("p", {
+											className: "text-sm text-status-error-text",
+											children: R
+										}),
+										/* @__PURE__ */ b(f, {
+											onClick: W,
+											disabled: B,
+											className: "w-full",
+											children: B ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(l, { className: "size-4 animate-spin" }), "Importing…"] }) : /* @__PURE__ */ x(y, { children: [
+												/* @__PURE__ */ b(u, { className: "size-4" }),
+												"Import ",
+												P.rows.length,
+												" ",
+												P.rows.length === 1 ? "row" : "rows"
+											] })
+										})
+									]
+								})
+							]
+						})
+					]
 				}),
-				/* @__PURE__ */ f(c, { children: [/* @__PURE__ */ d(i, {
+				/* @__PURE__ */ b(g, { children: /* @__PURE__ */ b(f, {
 					variant: "outline",
-					onClick: h,
+					onClick: D,
+					disabled: B,
 					children: "Cancel"
-				}), /* @__PURE__ */ f(i, {
-					onClick: g,
-					children: [
-						/* @__PURE__ */ d(r, { className: "size-4" }),
-						"Go to Workflows",
-						/* @__PURE__ */ d(t, { className: "size-4" })
-					]
-				})] })
+				}) })
 			]
 		})
 	});
 });
 //#endregion
-export { m as default };
+export { T as default };
 
 //# sourceMappingURL=ImportDataGuideDialog.js.map