@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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

@@ -1 +1 @@
-{"version":3,"file":"CacheTTLSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/CacheTTLSelector.tsx"],"sourcesContent":["/**\n * Cache TTL Selector\n *\n * Component for selecting cache duration with preset options and custom input.\n */\n\nimport { memo, useState, useEffect, useCallback, useRef } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface CacheTTLOption {\n  value: number;\n  label: string;\n  description: string;\n  recommended?: boolean;\n}\n\ninterface CacheTTLSelectorProps {\n  /** Current TTL value in seconds (null for no cache) */\n  value: number | null;\n  /** Callback when value changes */\n  onChange: (value: number) => void;\n  /** Whether selector is disabled */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /**\n   * Hide the built-in \"Cache Duration\" heading + description. Use when the\n   * surrounding form already renders its own label for this control, to avoid a\n   * duplicated heading.\n   */\n  hideLabel?: boolean;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst PRESET_OPTIONS: CacheTTLOption[] = [\n  {\n    value: 300, // 5 minutes\n    label: '5 minutes',\n    description: 'Best for real-time dashboards',\n  },\n  {\n    value: 900, // 15 minutes\n    label: '15 minutes',\n    description: 'Balanced performance',\n    recommended: true,\n  },\n  {\n    value: 3600, // 1 hour\n    label: '1 hour',\n    description: 'For data that changes hourly',\n  },\n  {\n    value: 86400, // 24 hours\n    label: '24 hours',\n    description: 'For daily reports',\n  },\n];\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Check if value is a preset option\n */\nfunction isPresetValue(value: number | null): boolean {\n  if (value === null) return false;\n  return PRESET_OPTIONS.some((opt) => opt.value === value);\n}\n\n/**\n * Format seconds to human-readable string\n */\nfunction formatDuration(seconds: number): string {\n  if (seconds < 60) {\n    return `${seconds} seconds`;\n  }\n  if (seconds < 3600) {\n    return `${Math.floor(seconds / 60)} minutes`;\n  }\n  if (seconds < 86400) {\n    return `${Math.floor(seconds / 3600)} hours`;\n  }\n  return `${Math.floor(seconds / 86400)} days`;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const CacheTTLSelector = memo(function CacheTTLSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n  hideLabel = false,\n}: CacheTTLSelectorProps) {\n  // Track whether custom mode is active\n  const [isCustom, setIsCustom] = useState(!isPresetValue(value) && value !== null);\n  const [customValue, setCustomValue] = useState(value?.toString() || '');\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const prevValueRef = useRef(value);\n\n  // Sync custom value when external value changes (using deferred update to avoid cascading renders)\n  useEffect(() => {\n    if (prevValueRef.current !== value) {\n      prevValueRef.current = value;\n      if (value !== null && !isPresetValue(value)) {\n        // Defer state update to avoid synchronous setState in effect\n        queueMicrotask(() => {\n          setCustomValue(value.toString());\n          setIsCustom(true);\n        });\n      }\n    }\n  }, [value]);\n\n  // Handle preset selection\n  const handlePresetChange = useCallback(\n    (presetValue: number) => {\n      if (disabled) return;\n      setIsCustom(false);\n      onChange(presetValue);\n    },\n    [disabled, onChange]\n  );\n\n  // Handle custom mode activation\n  const handleCustomSelect = useCallback(() => {\n    if (disabled) return;\n    setIsCustom(true);\n    const parsed = parseInt(customValue);\n    if (!isNaN(parsed) && parsed >= 30 && parsed <= 86400) {\n      onChange(parsed);\n    }\n  }, [disabled, customValue, onChange]);\n\n  // Handle custom value change with validation\n  const handleCustomChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      setCustomValue(inputValue);\n\n      // Validate input\n      if (inputValue === '') {\n        setValidationError(null);\n        return;\n      }\n\n      const parsed = parseInt(inputValue);\n\n      if (isNaN(parsed)) {\n        setValidationError('Please enter a valid number');\n        return;\n      }\n\n      if (parsed < 30) {\n        setValidationError('Minimum cache duration is 30 seconds');\n        return;\n      }\n\n      if (parsed > 86400) {\n        setValidationError('Maximum cache duration is 86400 seconds (24 hours)');\n        return;\n      }\n\n      // Valid value\n      setValidationError(null);\n      onChange(parsed);\n    },\n    [onChange]\n  );\n\n  return (\n    <div className=\"space-y-3\">\n      {/* Label (optional — hidden when the surrounding form supplies its own) */}\n      {!hideLabel && (\n        <div>\n          <label className=\"block text-sm font-medium text-text-primary mb-1\">Cache Duration</label>\n          <p className=\"text-xs text-text-secondary\">How long should data be cached before refreshing?</p>\n        </div>\n      )}\n\n      {/* Options */}\n      <div className=\"space-y-2\">\n        {/* Preset options */}\n        {PRESET_OPTIONS.map((option) => (\n          <label\n            key={option.value}\n            className={`\n              flex items-start gap-3\n              p-3\n              border rounded-lg\n              cursor-pointer\n              transition-all\n              ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n              ${\n                !isCustom && value === option.value\n                  ? 'border-action-primary-bg bg-action-primary-bg/5'\n                  : 'border-border-default hover:border-border-hover'\n              }\n            `}\n          >\n            <input\n              type=\"radio\"\n              name=\"cache-ttl\"\n              checked={!isCustom && value === option.value}\n              onChange={() => handlePresetChange(option.value)}\n              disabled={disabled}\n              className={`\n                mt-0.5\n                w-4 h-4\n                text-action-primary-bg\n                border-border-default\n                focus:ring-action-primary-bg\n                focus:ring-offset-0\n              `}\n            />\n            <div className=\"flex-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-sm font-medium text-text-primary\">{option.label}</span>\n                {option.recommended && (\n                  <span className=\"px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded\">\n                    Recommended\n                  </span>\n                )}\n              </div>\n              <p className=\"text-xs text-text-secondary mt-0.5\">{option.description}</p>\n            </div>\n          </label>\n        ))}\n\n        {/* Custom option */}\n        <label\n          className={`\n            flex items-start gap-3\n            p-3\n            border rounded-lg\n            cursor-pointer\n            transition-all\n            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n            ${\n              isCustom\n                ? 'border-action-primary-bg bg-action-primary-bg/5'\n                : 'border-border-default hover:border-border-hover'\n            }\n          `}\n        >\n          <input\n            type=\"radio\"\n            name=\"cache-ttl\"\n            checked={isCustom}\n            onChange={handleCustomSelect}\n            disabled={disabled}\n            className={`\n              mt-0.5\n              w-4 h-4\n              text-action-primary-bg\n              border-border-default\n              focus:ring-action-primary-bg\n              focus:ring-offset-0\n            `}\n          />\n          <div className=\"flex-1\">\n            <span className=\"text-sm font-medium text-text-primary\">Custom</span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">Enter a custom cache duration (30 - 86400 seconds)</p>\n            {isCustom && (\n              <>\n                <div className=\"mt-3 flex items-center gap-2\">\n                  <input\n                    type=\"number\"\n                    value={customValue}\n                    onChange={handleCustomChange}\n                    disabled={disabled}\n                    min={30}\n                    max={86400}\n                    placeholder=\"300\"\n                    className={`\n                      w-32 px-3 py-2\n                      bg-bg-sunken\n                      border rounded-md\n                      text-sm text-text-primary\n                      placeholder-text-tertiary\n                      focus:outline-none\n                      focus:border-action-primary-bg\n                      focus:ring-2\n                      focus:ring-action-primary-bg/20\n                      ${error || validationError ? 'border-status-error-border' : 'border-border-default'}\n                    `}\n                  />\n                  <span className=\"text-sm text-text-secondary\">seconds</span>\n                  {customValue && !isNaN(parseInt(customValue)) && !validationError && (\n                    <span className=\"text-xs text-text-tertiary\">({formatDuration(parseInt(customValue))})</span>\n                  )}\n                </div>\n                {validationError && (\n                  <div className=\"flex items-center gap-1 mt-1\">\n                    <svg\n                      className=\"w-3.5 h-3.5 text-status-error-text flex-shrink-0\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n                      />\n                    </svg>\n                    <span className=\"text-xs text-status-error-text\">{validationError}</span>\n                  </div>\n                )}\n              </>\n            )}\n          </div>\n        </label>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <div className=\"flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n\n      {/* Info message */}\n      {value !== null && !error && (\n        <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n          <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <span>Data will be cached for {formatDuration(value)} before being refreshed</span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default CacheTTLSelector;\n"],"mappings":"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"}
+{"version":3,"file":"CacheTTLSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/CacheTTLSelector.tsx"],"sourcesContent":["/**\n * Cache TTL Selector\n *\n * Component for selecting cache duration with preset options and custom input.\n */\n\nimport { memo, useState, useEffect, useCallback, useMemo, useRef } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface CacheTTLOption {\n  value: number;\n  label: string;\n  description: string;\n  recommended?: boolean;\n}\n\ninterface CacheTTLSelectorProps {\n  /** Current TTL value in seconds (null for no cache) */\n  value: number | null;\n  /** Callback when value changes */\n  onChange: (value: number) => void;\n  /** Whether selector is disabled */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /**\n   * Hide the built-in \"Cache Duration\" heading + description. Use when the\n   * surrounding form already renders its own label for this control, to avoid a\n   * duplicated heading.\n   */\n  hideLabel?: boolean;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst PRESET_VALUES: number[] = [300, 900, 3600, 86400];\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Check if value is a preset option\n */\nfunction isPresetValue(value: number | null): boolean {\n  if (value === null) return false;\n  return PRESET_VALUES.includes(value);\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const CacheTTLSelector = memo(function CacheTTLSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n  hideLabel = false,\n}: CacheTTLSelectorProps) {\n  const { t } = useI18n();\n\n  const PRESET_OPTIONS = useMemo<CacheTTLOption[]>(\n    () => [\n      {\n        value: 300, // 5 minutes\n        label: t('bigconsole.dataSinks.cacheTtl.preset5MinutesLabel', '5 minutes'),\n        description: t('bigconsole.dataSinks.cacheTtl.preset5MinutesDescription', 'Best for real-time dashboards'),\n      },\n      {\n        value: 900, // 15 minutes\n        label: t('bigconsole.dataSinks.cacheTtl.preset15MinutesLabel', '15 minutes'),\n        description: t('bigconsole.dataSinks.cacheTtl.preset15MinutesDescription', 'Balanced performance'),\n        recommended: true,\n      },\n      {\n        value: 3600, // 1 hour\n        label: t('bigconsole.dataSinks.cacheTtl.preset1HourLabel', '1 hour'),\n        description: t('bigconsole.dataSinks.cacheTtl.preset1HourDescription', 'For data that changes hourly'),\n      },\n      {\n        value: 86400, // 24 hours\n        label: t('bigconsole.dataSinks.cacheTtl.preset24HoursLabel', '24 hours'),\n        description: t('bigconsole.dataSinks.cacheTtl.preset24HoursDescription', 'For daily reports'),\n      },\n    ],\n    [t]\n  );\n\n  // Format seconds to human-readable string\n  const formatDuration = useCallback(\n    (seconds: number): string => {\n      if (seconds < 60) {\n        return t('bigconsole.dataSinks.cacheTtl.durationSeconds', '{{count}} seconds', { count: seconds });\n      }\n      if (seconds < 3600) {\n        return t('bigconsole.dataSinks.cacheTtl.durationMinutes', '{{count}} minutes', {\n          count: Math.floor(seconds / 60),\n        });\n      }\n      if (seconds < 86400) {\n        return t('bigconsole.dataSinks.cacheTtl.durationHours', '{{count}} hours', {\n          count: Math.floor(seconds / 3600),\n        });\n      }\n      return t('bigconsole.dataSinks.cacheTtl.durationDays', '{{count}} days', {\n        count: Math.floor(seconds / 86400),\n      });\n    },\n    [t]\n  );\n\n  // Track whether custom mode is active\n  const [isCustom, setIsCustom] = useState(!isPresetValue(value) && value !== null);\n  const [customValue, setCustomValue] = useState(value?.toString() || '');\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const prevValueRef = useRef(value);\n\n  // Sync custom value when external value changes (using deferred update to avoid cascading renders)\n  useEffect(() => {\n    if (prevValueRef.current !== value) {\n      prevValueRef.current = value;\n      if (value !== null && !isPresetValue(value)) {\n        // Defer state update to avoid synchronous setState in effect\n        queueMicrotask(() => {\n          setCustomValue(value.toString());\n          setIsCustom(true);\n        });\n      }\n    }\n  }, [value]);\n\n  // Handle preset selection\n  const handlePresetChange = useCallback(\n    (presetValue: number) => {\n      if (disabled) return;\n      setIsCustom(false);\n      onChange(presetValue);\n    },\n    [disabled, onChange]\n  );\n\n  // Handle custom mode activation\n  const handleCustomSelect = useCallback(() => {\n    if (disabled) return;\n    setIsCustom(true);\n    const parsed = parseInt(customValue);\n    if (!isNaN(parsed) && parsed >= 30 && parsed <= 86400) {\n      onChange(parsed);\n    }\n  }, [disabled, customValue, onChange]);\n\n  // Handle custom value change with validation\n  const handleCustomChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      setCustomValue(inputValue);\n\n      // Validate input\n      if (inputValue === '') {\n        setValidationError(null);\n        return;\n      }\n\n      const parsed = parseInt(inputValue);\n\n      if (isNaN(parsed)) {\n        setValidationError(t('bigconsole.dataSinks.cacheTtl.errorInvalidNumber', 'Please enter a valid number'));\n        return;\n      }\n\n      if (parsed < 30) {\n        setValidationError(t('bigconsole.dataSinks.cacheTtl.errorMinDuration', 'Minimum cache duration is 30 seconds'));\n        return;\n      }\n\n      if (parsed > 86400) {\n        setValidationError(\n          t('bigconsole.dataSinks.cacheTtl.errorMaxDuration', 'Maximum cache duration is 86400 seconds (24 hours)')\n        );\n        return;\n      }\n\n      // Valid value\n      setValidationError(null);\n      onChange(parsed);\n    },\n    [onChange, t]\n  );\n\n  return (\n    <div className=\"space-y-form-gap\">\n      {/* Label — suppressed with `hideLabel` when the surrounding form already\n          renders one for this control, so the section never shows a duplicated\n          heading. The `role=\"group\"` name below keeps the control set announced\n          to assistive tech either way. */}\n      {!hideLabel && (\n        <div>\n          <label className=\"block text-sm font-medium text-text-primary mb-1\">\n            {t('bigconsole.dataSinks.cacheTtl.heading', 'Cache Duration')}\n          </label>\n          <p className=\"text-xs text-text-secondary\">\n            {t('bigconsole.dataSinks.cacheTtl.headingDescription', 'How long should data be cached before refreshing?')}\n          </p>\n        </div>\n      )}\n\n      {/* Options */}\n      <div\n        role=\"group\"\n        aria-label={t('bigconsole.dataSinks.cacheTtl.heading', 'Cache Duration')}\n        className=\"space-y-list-gap\"\n      >\n        {/* Preset options */}\n        {PRESET_OPTIONS.map((option) => (\n          <label\n            key={option.value}\n            className={`\n              flex cursor-pointer items-start gap-3\n              rounded-input\n              border p-3\n              motion-safe:transition-colors\n              ${disabled ? 'cursor-not-allowed opacity-50' : ''}\n              ${\n                !isCustom && value === option.value\n                  ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle'\n                  : 'border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]'\n              }\n            `}\n          >\n            <input\n              type=\"radio\"\n              name=\"cache-ttl\"\n              checked={!isCustom && value === option.value}\n              onChange={() => handlePresetChange(option.value)}\n              disabled={disabled}\n              className={`\n                mt-0.5\n                h-4 w-4\n                border-[var(--color-border-default)]\n                text-action-primary-bg\n                focus-visible:ring-2\n                focus-visible:ring-ring\n              `}\n            />\n            <div className=\"flex-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-sm font-medium text-text-primary\">{option.label}</span>\n                {option.recommended && (\n                  <span className=\"px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded\">\n                    {t('bigconsole.dataSinks.cacheTtl.recommendedBadge', 'Recommended')}\n                  </span>\n                )}\n              </div>\n              <p className=\"text-xs text-text-secondary mt-0.5\">{option.description}</p>\n            </div>\n          </label>\n        ))}\n\n        {/* Custom option */}\n        <label\n          className={`\n            flex cursor-pointer items-start gap-3\n            rounded-input\n            border p-3\n            motion-safe:transition-colors\n            ${disabled ? 'cursor-not-allowed opacity-50' : ''}\n            ${\n              isCustom\n                ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle'\n                : 'border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]'\n            }\n          `}\n        >\n          <input\n            type=\"radio\"\n            name=\"cache-ttl\"\n            checked={isCustom}\n            onChange={handleCustomSelect}\n            disabled={disabled}\n            className={`\n              mt-0.5\n              h-4 w-4\n              border-[var(--color-border-default)]\n              text-action-primary-bg\n              focus-visible:ring-2\n              focus-visible:ring-ring\n            `}\n          />\n          <div className=\"flex-1\">\n            <span className=\"text-sm font-medium text-text-primary\">\n              {t('bigconsole.dataSinks.cacheTtl.customLabel', 'Custom')}\n            </span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">\n              {t(\n                'bigconsole.dataSinks.cacheTtl.customDescription',\n                'Enter a custom cache duration (30 - 86400 seconds)'\n              )}\n            </p>\n            {isCustom && (\n              <>\n                <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n                  <input\n                    type=\"number\"\n                    aria-label=\"Custom cache duration in seconds\"\n                    value={customValue}\n                    onChange={handleCustomChange}\n                    disabled={disabled}\n                    min={30}\n                    max={86400}\n                    placeholder=\"300\"\n                    className={`\n                      h-control-md w-full min-w-0 rounded-input\n                      border bg-bg-sunken\n                      px-3\n                      text-sm text-text-primary\n                      focus-visible:outline-none\n                      focus-visible:ring-2\n                      focus-visible:ring-ring\n                      sm:w-32\n                      ${error || validationError ? 'border-[var(--color-status-error-border)]' : 'border-[var(--color-border-default)]'}\n                    `}\n                  />\n                  <span className=\"text-sm text-text-secondary\">\n                    {t('bigconsole.dataSinks.cacheTtl.secondsUnit', 'seconds')}\n                  </span>\n                  {customValue && !isNaN(parseInt(customValue)) && !validationError && (\n                    <span className=\"text-xs text-text-muted\">({formatDuration(parseInt(customValue))})</span>\n                  )}\n                </div>\n                {validationError && (\n                  <div className=\"flex items-center gap-1 mt-1\">\n                    <svg\n                      className=\"w-3.5 h-3.5 text-status-error-text flex-shrink-0\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n                      />\n                    </svg>\n                    <span className=\"text-xs text-status-error-text\">{validationError}</span>\n                  </div>\n                )}\n              </>\n            )}\n          </div>\n        </label>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <div className=\"flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n\n      {/* Info message */}\n      {value !== null && !error && (\n        <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n          <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <span>\n            {t(\n              'bigconsole.dataSinks.cacheTtl.infoCachedFor',\n              'Data will be cached for {{duration}} before being refreshed',\n              {\n                duration: formatDuration(value),\n              }\n            )}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default CacheTTLSelector;\n"],"mappings":"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"}

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

@@ -1,129 +1,128 @@
-import e from "./DataSinkStatusBadge.js";
-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";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import "../common/index.js";
+import t from "./DataSinkStatusBadge.js";
+import { memo as n, useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { formatDistanceToNow as o } 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, canEdit: p = !0, canRefresh: m = !0, canDelete: h = !0 }) {
-	let g = n((e) => {
-		e.stopPropagation(), s?.(t.id);
-	}, [t.id, s]), _ = n((e) => {
-		e.stopPropagation(), c?.(t.id);
-	}, [t.id, c]), v = n((e) => {
-		e.stopPropagation(), l?.(t.id);
-	}, [t.id, l]), y = n((e) => {
-		e.stopPropagation(), u?.(t.id);
-	}, [t.id, u]), b = n((e) => {
-		e.stopPropagation(), d?.(t.id);
-	}, [t.id, d]), x = n((e) => {
-		e.stopPropagation(), f?.(t.id);
-	}, [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: g,
+var s = `inline-flex min-h-[var(--size-controlHeight-md)] items-center justify-center rounded-button px-3 py-1.5 text-xs font-medium motion-safe:transition-colors ${e}`, c = n(function({ dataSink: e, setupState: n, onView: c, onEdit: l, onRefresh: u, onExport: d, onDelete: f, onContinueSetup: p, canEdit: m = !0, canRefresh: h = !0, canDelete: g = !0 }) {
+	let _ = r((t) => {
+		t.stopPropagation(), c?.(e.id);
+	}, [e.id, c]), v = r((t) => {
+		t.stopPropagation(), l?.(e.id);
+	}, [e.id, l]), y = r((t) => {
+		t.stopPropagation(), u?.(e.id);
+	}, [e.id, u]), b = r((t) => {
+		t.stopPropagation(), d?.(e.id);
+	}, [e.id, d]), x = r((t) => {
+		t.stopPropagation(), f?.(e.id);
+	}, [e.id, f]), S = r((t) => {
+		t.stopPropagation(), p?.(e.id);
+	}, [e.id, p]), C = (n ?? e.setupState) === "completed", w = e.lastRefreshedAt ? o(new Date(e.lastRefreshedAt), { addSuffix: !0 }) : "Never";
+	return /* @__PURE__ */ a("article", {
+		className: "\n        min-w-0\n        cursor-pointer\n        rounded-card\n        border border-transparent\n        bg-bg-sunken\n        p-card-padding\n        hover:border-[var(--color-action-primary-bg)]\n        motion-safe:transition-colors\n      ",
+		onClick: _,
 		children: [
-			/* @__PURE__ */ i("div", {
-				className: "flex items-start justify-between mb-3",
-				children: [/* @__PURE__ */ i("div", {
-					className: "flex-1 min-w-0",
-					children: [/* @__PURE__ */ r("h3", {
-						className: "text-sm font-semibold text-text-primary truncate",
-						children: t.name || "Untitled DataSink"
-					}), /* @__PURE__ */ r("p", {
-						className: "text-xs text-text-secondary font-mono mt-0.5 truncate",
-						children: t.key
+			/* @__PURE__ */ a("div", {
+				className: "mb-3 flex items-start justify-between gap-icon-gap",
+				children: [/* @__PURE__ */ a("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ i("h3", {
+						className: "truncate text-sm font-semibold text-text-primary",
+						children: e.name || "Untitled data sink"
+					}), /* @__PURE__ */ i("p", {
+						className: "mt-0.5 truncate font-mono text-xs text-text-secondary",
+						children: e.key
 					})]
-				}), /* @__PURE__ */ r(e, {
-					status: t.status,
+				}), /* @__PURE__ */ i(t, {
+					status: e.status,
 					size: "sm"
 				})]
 			}),
-			t.description && /* @__PURE__ */ r("p", {
-				className: "text-xs text-text-secondary mb-3 line-clamp-2",
-				children: t.description
+			e.description && /* @__PURE__ */ i("p", {
+				className: "mb-3 line-clamp-2 text-xs text-text-secondary",
+				children: e.description
 			}),
-			/* @__PURE__ */ i("div", {
-				className: "flex items-center gap-4 text-xs text-text-secondary mb-3",
-				children: [/* @__PURE__ */ i("span", {
+			/* @__PURE__ */ a("div", {
+				className: "mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary",
+				children: [/* @__PURE__ */ a("span", {
 					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ r("svg", {
+					children: [/* @__PURE__ */ i("svg", {
 						className: "w-3.5 h-3.5",
 						fill: "none",
 						stroke: "currentColor",
 						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ r("path", {
+						children: /* @__PURE__ */ i("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
 							d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
 						})
-					}), C]
-				}), t.linkedWorkflowCount !== void 0 && t.linkedWorkflowCount > 0 && /* @__PURE__ */ i("span", {
+					}), w]
+				}), e.linkedWorkflowCount !== void 0 && e.linkedWorkflowCount > 0 && /* @__PURE__ */ a("span", {
 					className: "flex items-center gap-1",
 					children: [
-						/* @__PURE__ */ r("svg", {
+						/* @__PURE__ */ i("svg", {
 							className: "w-3.5 h-3.5",
 							fill: "none",
 							stroke: "currentColor",
 							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ i("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
 								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"
 							})
 						}),
-						t.linkedWorkflowCount,
+						e.linkedWorkflowCount,
 						" workflow",
-						t.linkedWorkflowCount === 1 ? "" : "s"
+						e.linkedWorkflowCount === 1 ? "" : "s"
 					]
 				})]
 			}),
-			!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",
-					children: [/* @__PURE__ */ r("span", {
-						className: "text-xs text-status-warning-text",
-						children: "Setup incomplete"
-					}), /* @__PURE__ */ r("button", {
-						type: "button",
-						onClick: x,
-						className: "text-xs font-medium text-action-primary-bg hover:underline",
-						children: "Continue"
-					})]
-				})
+			!C && /* @__PURE__ */ a("div", {
+				className: "mb-3 flex items-center justify-between gap-icon-gap rounded-input border border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bgSubtle)] p-2",
+				children: [/* @__PURE__ */ i("span", {
+					className: "text-xs text-[var(--color-status-warning-text)]",
+					children: "Setup incomplete"
+				}), /* @__PURE__ */ i("button", {
+					type: "button",
+					onClick: S,
+					className: "rounded-button px-1 text-xs font-medium text-text-link hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+					children: "Continue"
+				})]
 			}),
-			/* @__PURE__ */ i("div", {
-				className: "flex items-center gap-2 pt-2 border-t border-border-default",
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-wrap items-center gap-2 border-t border-[var(--color-border-subtle)] pt-2",
 				children: [
-					/* @__PURE__ */ r("button", {
+					/* @__PURE__ */ i("button", {
 						type: "button",
-						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",
+						onClick: _,
+						className: `${s} flex-1 bg-bg-surface text-text-primary hover:bg-bg-elevated`,
 						children: "View"
 					}),
-					p && /* @__PURE__ */ r("button", {
+					m && /* @__PURE__ */ i("button", {
 						type: "button",
-						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",
+						onClick: v,
+						className: `${s} text-text-secondary hover:bg-bg-surface hover:text-text-primary`,
 						children: "Edit"
 					}),
-					m && /* @__PURE__ */ r("button", {
+					h && /* @__PURE__ */ i("button", {
 						type: "button",
-						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",
+						onClick: y,
+						className: `${s} text-text-secondary hover:bg-bg-surface hover:text-text-primary`,
 						children: "Refresh"
 					}),
-					u && /* @__PURE__ */ r("button", {
+					d && /* @__PURE__ */ i("button", {
 						type: "button",
-						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",
+						onClick: b,
+						className: `${s} text-text-secondary hover:bg-bg-surface hover:text-text-primary`,
 						children: "Export"
 					}),
-					h && /* @__PURE__ */ r("button", {
+					g && /* @__PURE__ */ i("button", {
 						type: "button",
-						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",
+						onClick: x,
+						className: `${s} text-status-error-text hover:bg-[var(--color-status-error-bgSubtle)]`,
 						children: "Delete"
 					})
 				]
@@ -132,6 +131,6 @@ var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh
 	});
 });
 //#endregion
-export { o as default };
+export { c as default };
 
 //# sourceMappingURL=DataSinkCard.js.map

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  /** 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":"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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 { SECTION_FOCUS_RING } from '../common';\nimport type { DataSink, DataSinkSetupState } from '../../types';\n\n/**\n * Shared class recipe for the card's five action buttons. `min-h-[var(--size-controlHeight-md)]`\n * keeps every one at the 40px touch minimum once the row wraps on mobile.\n */\nconst CARD_ACTION =\n  `inline-flex min-h-[var(--size-controlHeight-md)] items-center justify-center rounded-button px-3 py-1.5 text-xs font-medium motion-safe:transition-colors ${SECTION_FOCUS_RING}` as const;\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    // A card is a tile inside the page's `primary` results section, so it steps\n    // down to the `muted` recipe (recessed surface, transparent border) instead\n    // of competing with the panel that contains it.\n    <article\n      className={`\n        min-w-0\n        cursor-pointer\n        rounded-card\n        border border-transparent\n        bg-bg-sunken\n        p-card-padding\n        hover:border-[var(--color-action-primary-bg)]\n        motion-safe:transition-colors\n      `}\n      onClick={handleView}\n    >\n      {/* Identity */}\n      <div className=\"mb-3 flex items-start justify-between gap-icon-gap\">\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"truncate text-sm font-semibold text-text-primary\">{dataSink.name || 'Untitled data sink'}</h3>\n          <p className=\"mt-0.5 truncate font-mono text-xs text-text-secondary\">{dataSink.key}</p>\n        </div>\n        <DataSinkStatusBadge status={dataSink.status} size=\"sm\" />\n      </div>\n\n      {/* Description */}\n      {dataSink.description && <p className=\"mb-3 line-clamp-2 text-xs text-text-secondary\">{dataSink.description}</p>}\n\n      {/* Stats */}\n      <div className=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary\">\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 — a warning strip, so it carries the warning tone. */}\n      {!isSetupComplete && (\n        <div className=\"mb-3 flex items-center justify-between gap-icon-gap rounded-input border border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bgSubtle)] p-2\">\n          <span className=\"text-xs text-[var(--color-status-warning-text)]\">Setup incomplete</span>\n          <button\n            type=\"button\"\n            onClick={handleContinueSetup}\n            className={`rounded-button px-1 text-xs font-medium text-text-link hover:underline ${SECTION_FOCUS_RING}`}\n          >\n            Continue\n          </button>\n        </div>\n      )}\n\n      {/* Actions */}\n      <div className=\"flex flex-wrap items-center gap-2 border-t border-[var(--color-border-subtle)] pt-2\">\n        <button\n          type=\"button\"\n          onClick={handleView}\n          className={`${CARD_ACTION} flex-1 bg-bg-surface text-text-primary hover:bg-bg-elevated`}\n        >\n          View\n        </button>\n        {canEdit && (\n          <button\n            type=\"button\"\n            onClick={handleEdit}\n            className={`${CARD_ACTION} text-text-secondary hover:bg-bg-surface hover:text-text-primary`}\n          >\n            Edit\n          </button>\n        )}\n        {canRefresh && (\n          <button\n            type=\"button\"\n            onClick={handleRefresh}\n            className={`${CARD_ACTION} text-text-secondary hover:bg-bg-surface hover:text-text-primary`}\n          >\n            Refresh\n          </button>\n        )}\n        {onExport && (\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            className={`${CARD_ACTION} text-text-secondary hover:bg-bg-surface hover:text-text-primary`}\n          >\n            Export\n          </button>\n        )}\n        {canDelete && (\n          <button\n            type=\"button\"\n            onClick={handleDelete}\n            className={`${CARD_ACTION} text-status-error-text hover:bg-[var(--color-status-error-bgSubtle)]`}\n          >\n            Delete\n          </button>\n        )}\n      </div>\n    </article>\n  );\n});\n\nexport default DataSinkCard;\n"],"mappings":"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"}

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

@@ -1,43 +1,42 @@
-import { memo as e, useCallback as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import { Section as t } from "../common/Section.js";
+import "../common/index.js";
+import { memo as n, useCallback as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/DataSinkDataViewer.tsx
-var a = e(function({ data: e, dataPath: a, maxHeight: o = "400px", showCopyButton: s = !0 }) {
-	let [c, l] = n(!1), u = JSON.stringify(e, null, 2), d = t(async () => {
+var o = n(function({ data: n, dataPath: o, maxHeight: s = "400px", showCopyButton: c = !0 }) {
+	let [l, u] = i(!1), d = JSON.stringify(n, null, 2), f = r(async () => {
 		try {
-			await navigator.clipboard.writeText(u), l(!0), setTimeout(() => l(!1), 2e3);
+			await navigator.clipboard.writeText(d), u(!0), setTimeout(() => u(!1), 2e3);
 		} catch {}
-	}, [u]);
-	return /* @__PURE__ */ i("div", {
-		className: "relative",
-		children: [(a || s) && /* @__PURE__ */ i("div", {
-			className: "flex items-center justify-between p-2 bg-bg-sunken border-b border-border-default rounded-t-md",
-			children: [a && /* @__PURE__ */ i("span", {
-				className: "text-xs text-text-secondary font-mono",
-				children: ["Path: ", a]
-			}), s && /* @__PURE__ */ r("button", {
-				type: "button",
-				onClick: d,
-				className: "\n                px-2 py-1\n                text-xs font-medium\n                text-text-primary\n                bg-bg-surface\n                hover:bg-bg-sunken\n                rounded\n                transition-colors\n              ",
-				children: c ? "Copied!" : "Copy"
-			})]
-		}), /* @__PURE__ */ r("pre", {
-			className: `
-          p-4
-          bg-bg-surface
-          border border-border-default
-          ${a || s ? "rounded-b-md border-t-0" : "rounded-md"}
-          overflow-auto
-          text-sm
-        `,
-			style: { maxHeight: o },
-			children: /* @__PURE__ */ r("code", {
-				className: "text-text-primary font-mono",
-				children: u
+	}, [d]);
+	return /* @__PURE__ */ a(t, {
+		emphasis: "muted",
+		padding: "compact",
+		headingLevel: 3,
+		title: "Raw JSON",
+		meta: o ? /* @__PURE__ */ a("span", {
+			className: "font-mono text-xs text-text-secondary",
+			children: o
+		}) : void 0,
+		actions: c ? /* @__PURE__ */ a("button", {
+			type: "button",
+			onClick: f,
+			className: `min-h-[var(--size-controlHeight-md)] rounded-button bg-bg-surface px-2 py-1 text-xs font-medium text-text-primary hover:bg-bg-elevated motion-safe:transition-colors ${e}`,
+			children: l ? "Copied!" : "Copy"
+		}) : void 0,
+		headerClassName: "mb-control-gap",
+		children: /* @__PURE__ */ a("pre", {
+			className: "min-w-0 overflow-auto rounded-input bg-bg-surface p-3 text-xs sm:text-sm",
+			style: { maxHeight: s },
+			children: /* @__PURE__ */ a("code", {
+				className: "font-mono text-text-primary",
+				children: d
 			})
-		})]
+		})
 	});
 });
 //#endregion
-export { a as default };
+export { o as default };
 
 //# sourceMappingURL=DataSinkDataViewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataSinkDataViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDataViewer.tsx"],"sourcesContent":["/**\n * DataSink Data Viewer\n *\n * Component for viewing DataSink data as formatted JSON.\n */\n\nimport { memo, useState, useCallback } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDataViewerProps {\n  /** Data to display */\n  data: unknown;\n  /** Optional path to display */\n  dataPath?: string;\n  /** Maximum height */\n  maxHeight?: string;\n  /** Whether to show copy button */\n  showCopyButton?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDataViewer = memo(function DataSinkDataViewer({\n  data,\n  dataPath,\n  maxHeight = '400px',\n  showCopyButton = true,\n}: DataSinkDataViewerProps) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  // Format data as JSON\n  const formattedData = JSON.stringify(data, null, 2);\n\n  // Copy to clipboard\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(formattedData);\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 2000);\n    } catch (err) {}\n  }, [formattedData]);\n\n  return (\n    <div className=\"relative\">\n      {/* Header with path and copy button */}\n      {(dataPath || showCopyButton) && (\n        <div className=\"flex items-center justify-between p-2 bg-bg-sunken border-b border-border-default rounded-t-md\">\n          {dataPath && <span className=\"text-xs text-text-secondary font-mono\">Path: {dataPath}</span>}\n          {showCopyButton && (\n            <button\n              type=\"button\"\n              onClick={handleCopy}\n              className={`\n                px-2 py-1\n                text-xs font-medium\n                text-text-primary\n                bg-bg-surface\n                hover:bg-bg-sunken\n                rounded\n                transition-colors\n              `}\n            >\n              {isCopied ? 'Copied!' : 'Copy'}\n            </button>\n          )}\n        </div>\n      )}\n\n      {/* Data display */}\n      <pre\n        className={`\n          p-4\n          bg-bg-surface\n          border border-border-default\n          ${dataPath || showCopyButton ? 'rounded-b-md border-t-0' : 'rounded-md'}\n          overflow-auto\n          text-sm\n        `}\n        style={{ maxHeight }}\n      >\n        <code className=\"text-text-primary font-mono\">{formattedData}</code>\n      </pre>\n    </div>\n  );\n});\n\nexport default DataSinkDataViewer;\n"],"mappings":";;;AA2BA,IAAa,IAAqB,EAAK,SAA4B,EACjE,SACA,aACA,eAAY,SACZ,oBAAiB,MACS;CAC1B,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAGzC,IAAgB,KAAK,UAAU,GAAM,MAAM,EAAE,EAG7C,IAAa,EAAY,YAAY;AACzC,MAAI;AAGF,GAFA,MAAM,UAAU,UAAU,UAAU,EAAc,EAClD,EAAY,GAAK,EACjB,iBAAiB,EAAY,GAAM,EAAE,IAAK;UAC9B;IACb,CAAC,EAAc,CAAC;AAEnB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,EAEI,KAAY,MACZ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,KAAY,kBAAC,QAAD;IAAM,WAAU;cAAhB,CAAwD,UAAO,EAAgB;OAC3F,KACC,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAW;cAUV,IAAW,YAAY;IACjB,CAAA,CAEP;MAIR,kBAAC,OAAD;GACE,WAAW;;;;YAIP,KAAY,IAAiB,4BAA4B,aAAa;;;;GAI1E,OAAO,EAAE,cAAW;aAEpB,kBAAC,QAAD;IAAM,WAAU;cAA+B;IAAqB,CAAA;GAChE,CAAA,CACF;;EAER"}
+{"version":3,"file":"DataSinkDataViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDataViewer.tsx"],"sourcesContent":["/**\n * DataSink Data Viewer\n *\n * Component for viewing DataSink data as formatted JSON.\n */\n\nimport { memo, useState, useCallback } from 'react';\nimport { Section, SECTION_FOCUS_RING } from '../common';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDataViewerProps {\n  /** Data to display */\n  data: unknown;\n  /** Optional path to display */\n  dataPath?: string;\n  /** Maximum height */\n  maxHeight?: string;\n  /** Whether to show copy button */\n  showCopyButton?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDataViewer = memo(function DataSinkDataViewer({\n  data,\n  dataPath,\n  maxHeight = '400px',\n  showCopyButton = true,\n}: DataSinkDataViewerProps) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  // Format data as JSON\n  const formattedData = JSON.stringify(data, null, 2);\n\n  // Copy to clipboard\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(formattedData);\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 2000);\n    } catch (err) {}\n  }, [formattedData]);\n\n  return (\n    <Section\n      emphasis=\"muted\"\n      padding=\"compact\"\n      // Rendered directly inside the detail page's level-2 \"Data preview\"\n      // section, so h3 keeps the outline unbroken (h2 → h4 would skip a level).\n      headingLevel={3}\n      title=\"Raw JSON\"\n      meta={dataPath ? <span className=\"font-mono text-xs text-text-secondary\">{dataPath}</span> : undefined}\n      actions={\n        showCopyButton ? (\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className={`min-h-[var(--size-controlHeight-md)] rounded-button bg-bg-surface px-2 py-1 text-xs font-medium text-text-primary hover:bg-bg-elevated motion-safe:transition-colors ${SECTION_FOCUS_RING}`}\n          >\n            {isCopied ? 'Copied!' : 'Copy'}\n          </button>\n        ) : undefined\n      }\n      headerClassName=\"mb-control-gap\"\n    >\n      <pre className=\"min-w-0 overflow-auto rounded-input bg-bg-surface p-3 text-xs sm:text-sm\" style={{ maxHeight }}>\n        <code className=\"font-mono text-text-primary\">{formattedData}</code>\n      </pre>\n    </Section>\n  );\n});\n\nexport default DataSinkDataViewer;\n"],"mappings":";;;;;;AA4BA,IAAa,IAAqB,EAAK,SAA4B,EACjE,SACA,aACA,eAAY,SACZ,oBAAiB,MACS;CAC1B,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAGzC,IAAgB,KAAK,UAAU,GAAM,MAAM,EAAE,EAG7C,IAAa,EAAY,YAAY;AACzC,MAAI;AAGF,GAFA,MAAM,UAAU,UAAU,UAAU,EAAc,EAClD,EAAY,GAAK,EACjB,iBAAiB,EAAY,GAAM,EAAE,IAAK;UAC9B;IACb,CAAC,EAAc,CAAC;AAEnB,QACE,kBAAC,GAAD;EACE,UAAS;EACT,SAAQ;EAGR,cAAc;EACd,OAAM;EACN,MAAM,IAAW,kBAAC,QAAD;GAAM,WAAU;aAAyC;GAAgB,CAAA,GAAG,KAAA;EAC7F,SACE,IACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW,wKAAwK;aAElL,IAAW,YAAY;GACjB,CAAA,GACP,KAAA;EAEN,iBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;GAA2E,OAAO,EAAE,cAAW;aAC5G,kBAAC,QAAD;IAAM,WAAU;cAA+B;IAAqB,CAAA;GAChE,CAAA;EACE,CAAA;EAEZ"}