@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/parser/ParserCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParserCard.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserCard.tsx"],"sourcesContent":["/**\n * Parser Card\n *\n * Card component displaying parser information with action buttons.\n */\n\nimport { memo, useCallback, useMemo } from 'react';\nimport { ParserStatusBadge } from './ParserStatusBadge';\nimport { ParserTypeBadge } from './ParserTypeBadge';\nimport type { Parser } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserCardProps {\n  /** Parser to display */\n  parser: Parser;\n  /** Callback when card is clicked (view) */\n  onView?: (id: string) => void;\n  /** Callback to edit parser */\n  onEdit?: (id: string) => void;\n  /** Callback to test parser */\n  onTest?: (id: string) => void;\n  /** Callback to execute parser */\n  onExecute?: (id: string) => void;\n  /** Callback to export parser */\n  onExport?: (id: string) => void;\n  /** Callback to delete parser */\n  onDelete?: (id: string) => void;\n  /** Whether this card's delete action is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Format date to locale string\n */\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return new Intl.DateTimeFormat('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  }).format(date);\n}\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string): string {\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return 'just now';\n  if (minutes < 60) return `${minutes}m ago`;\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n\n  return formatDate(dateString);\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst JqIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\nconst JsonataIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n  </svg>\n);\n\nconst DefaultIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst TestIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\nconst EditIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst ExportIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserCard = memo(function ParserCard({\n  parser,\n  onView,\n  onEdit,\n  onTest,\n  onExecute,\n  onExport,\n  onDelete,\n}: ParserCardProps) {\n  // Handle card click\n  const handleCardClick = useCallback(() => {\n    onView?.(parser.id);\n  }, [onView, parser.id]);\n\n  // Handle action button clicks (stop propagation)\n  const handleTest = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(parser.id);\n    },\n    [onTest, parser.id]\n  );\n\n  const handleExecute = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExecute?.(parser.id);\n    },\n    [onExecute, parser.id]\n  );\n\n  const handleEdit = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(parser.id);\n    },\n    [onEdit, parser.id]\n  );\n\n  const handleExport = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExport?.(parser.id);\n    },\n    [onExport, parser.id]\n  );\n\n  const handleDelete = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(parser.id);\n    },\n    [onDelete, parser.id]\n  );\n\n  // Get type icon - memoized to avoid creating component during render\n  const typeIcon = useMemo(() => {\n    const iconClass = 'w-10 h-10 text-text-secondary/50';\n    switch (parser.type) {\n      case 'jq':\n        return <JqIcon className={iconClass} />;\n      case 'jsonata':\n        return <JsonataIcon className={iconClass} />;\n      default:\n        return <DefaultIcon className={iconClass} />;\n    }\n  }, [parser.type]);\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className={`\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      `}\n    >\n      {/* Header with icon and badges */}\n      <div className=\"h-24 bg-bg-sunken flex items-center justify-center relative\">\n        {typeIcon}\n\n        {/* Type badge */}\n        <div className=\"absolute top-2 left-2\">\n          <ParserTypeBadge type={parser.type} size=\"sm\" />\n        </div>\n\n        {/* Status badge */}\n        <div className=\"absolute top-2 right-2\">\n          <ParserStatusBadge status={parser.status} size=\"sm\" />\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4\">\n        {/* Title and actions */}\n        <div className=\"flex items-start justify-between mb-2\">\n          <div className=\"flex-1 min-w-0\">\n            <h3 className=\"text-sm font-semibold text-text-primary truncate\">{parser.name || 'Untitled Parser'}</h3>\n            <p className=\"text-xs text-text-secondary truncate mt-0.5\">\n              {parser.inputSinkKey} → {parser.outputKey}\n            </p>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex items-center gap-1 ml-2\">\n            {onTest && (\n              <button\n                type=\"button\"\n                onClick={handleTest}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Test Parser\"\n              >\n                <TestIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onExecute && (\n              <button\n                type=\"button\"\n                onClick={handleExecute}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Execute Parser\"\n              >\n                <PlayIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onEdit && (\n              <button\n                type=\"button\"\n                onClick={handleEdit}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Edit Parser\"\n              >\n                <EditIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onExport && (\n              <button\n                type=\"button\"\n                onClick={handleExport}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Export Parser\"\n              >\n                <ExportIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDelete}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-status-error-text\n                  hover:bg-status-error-bg/10\n                  transition-colors\n                `}\n                title=\"Delete Parser\"\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {parser.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{parser.description}</p>}\n\n        {/* Footer with version and timestamps */}\n        <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-3\">\n            <span>v{parser.version}</span>\n            {parser.ttl && <span title={`Cache TTL: ${parser.ttl} seconds`}>TTL: {parser.ttl}s</span>}\n          </div>\n          <span title={`Last updated: ${formatDate(parser.updatedAt)}`}>{formatRelativeTime(parser.updatedAt)}</span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default ParserCard;\n"],"mappings":"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"}
+{"version":3,"file":"ParserCard.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserCard.tsx"],"sourcesContent":["/**\n * Parser Card\n *\n * Card component displaying parser information with action buttons.\n */\n\nimport { memo, useCallback, useMemo } from 'react';\nimport { ParserStatusBadge } from './ParserStatusBadge';\nimport { ParserTypeBadge } from './ParserTypeBadge';\nimport { SECTION_FOCUS_RING } from '../common';\nimport type { Parser } from '../../types';\n\n/**\n * Icon-only card actions are 40×40 so they clear the mobile touch minimum, and\n * they keep a visible focus ring because the card body is itself clickable.\n */\nconst CARD_ACTION_CLASSES = `inline-flex h-control-md aspect-square items-center justify-center rounded-md text-text-secondary motion-safe:transition-colors hover:bg-bg-sunken hover:text-text-primary ${SECTION_FOCUS_RING}`;\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserCardProps {\n  /** Parser to display */\n  parser: Parser;\n  /** Callback when card is clicked (view) */\n  onView?: (id: string) => void;\n  /** Callback to edit parser */\n  onEdit?: (id: string) => void;\n  /** Callback to test parser */\n  onTest?: (id: string) => void;\n  /** Callback to execute parser */\n  onExecute?: (id: string) => void;\n  /** Callback to export parser */\n  onExport?: (id: string) => void;\n  /** Callback to delete parser */\n  onDelete?: (id: string) => void;\n  /** Whether this card's delete action is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Format date to locale string\n */\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return new Intl.DateTimeFormat('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  }).format(date);\n}\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string): string {\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return 'just now';\n  if (minutes < 60) return `${minutes}m ago`;\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n\n  return formatDate(dateString);\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst JqIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\nconst JsonataIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n  </svg>\n);\n\nconst DefaultIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst TestIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\nconst EditIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst ExportIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserCard = memo(function ParserCard({\n  parser,\n  onView,\n  onEdit,\n  onTest,\n  onExecute,\n  onExport,\n  onDelete,\n}: ParserCardProps) {\n  // Handle card click\n  const handleCardClick = useCallback(() => {\n    onView?.(parser.id);\n  }, [onView, parser.id]);\n\n  // Title button — same action as the card surface, but must not double-fire\n  const handleTitleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onView?.(parser.id);\n    },\n    [onView, parser.id]\n  );\n\n  // Handle action button clicks (stop propagation)\n  const handleTest = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(parser.id);\n    },\n    [onTest, parser.id]\n  );\n\n  const handleExecute = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExecute?.(parser.id);\n    },\n    [onExecute, parser.id]\n  );\n\n  const handleEdit = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(parser.id);\n    },\n    [onEdit, parser.id]\n  );\n\n  const handleExport = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExport?.(parser.id);\n    },\n    [onExport, parser.id]\n  );\n\n  const handleDelete = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(parser.id);\n    },\n    [onDelete, parser.id]\n  );\n\n  // Get type icon - memoized to avoid creating component during render\n  const typeIcon = useMemo(() => {\n    const iconClass = 'w-icon-sm h-icon-sm text-text-secondary';\n    switch (parser.type) {\n      case 'jq':\n        return <JqIcon className={iconClass} />;\n      case 'jsonata':\n        return <JsonataIcon className={iconClass} />;\n      default:\n        return <DefaultIcon className={iconClass} />;\n    }\n  }, [parser.type]);\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className={`\n        flex h-full flex-col\n        bg-bg-elevated\n        border border-[var(--color-border-default)]\n        rounded-card\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        motion-safe:transition-colors\n      `}\n    >\n      {/* Identity strip — type + status, the two keys people scan a grid by */}\n      <div className=\"flex flex-wrap items-center justify-between gap-icon-gap border-b border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-2\">\n        <span className=\"flex min-w-0 items-center gap-icon-gap\">\n          {typeIcon}\n          <ParserTypeBadge type={parser.type} size=\"sm\" />\n        </span>\n        <ParserStatusBadge status={parser.status} size=\"sm\" />\n      </div>\n\n      {/* Content */}\n      <div className=\"flex flex-1 flex-col p-4\">\n        {/* Title and actions */}\n        <div className=\"flex flex-wrap items-start justify-between gap-icon-gap mb-2\">\n          <div className=\"flex-1 min-w-0\">\n            {/* The title is the card's keyboard-reachable \"open\" affordance. The card\n                surface stays mouse-clickable, but it is NOT a `role=\"button\"` — that\n                would nest the action buttons below inside another interactive element. */}\n            <h3 className=\"min-w-0 text-sm font-semibold text-text-primary\">\n              <button\n                type=\"button\"\n                onClick={handleTitleClick}\n                className={`block w-full truncate rounded-sm text-left ${SECTION_FOCUS_RING}`}\n              >\n                {parser.name || 'Untitled Parser'}\n              </button>\n            </h3>\n            <p\n              className=\"text-xs font-mono text-text-secondary truncate mt-0.5\"\n              title={`${parser.inputSinkKey} → ${parser.outputKey}`}\n            >\n              {parser.inputSinkKey} → {parser.outputKey}\n            </p>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex flex-wrap items-center gap-icon-gap\">\n            {onTest && (\n              <button type=\"button\" onClick={handleTest} className={CARD_ACTION_CLASSES} title=\"Test Parser\">\n                <span className=\"sr-only\">Test parser</span>\n                <TestIcon className=\"w-icon-sm h-icon-sm\" />\n              </button>\n            )}\n\n            {onExecute && (\n              <button type=\"button\" onClick={handleExecute} className={CARD_ACTION_CLASSES} title=\"Execute Parser\">\n                <span className=\"sr-only\">Execute parser</span>\n                <PlayIcon className=\"w-icon-sm h-icon-sm\" />\n              </button>\n            )}\n\n            {onEdit && (\n              <button type=\"button\" onClick={handleEdit} className={CARD_ACTION_CLASSES} title=\"Edit Parser\">\n                <span className=\"sr-only\">Edit parser</span>\n                <EditIcon className=\"w-icon-sm h-icon-sm\" />\n              </button>\n            )}\n\n            {onExport && (\n              <button type=\"button\" onClick={handleExport} className={CARD_ACTION_CLASSES} title=\"Export Parser\">\n                <span className=\"sr-only\">Export parser</span>\n                <ExportIcon className=\"w-icon-sm h-icon-sm\" />\n              </button>\n            )}\n\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDelete}\n                className={`${CARD_ACTION_CLASSES} hover:text-[var(--color-status-error-text)]`}\n                title=\"Delete Parser\"\n              >\n                <span className=\"sr-only\">Delete parser</span>\n                <DeleteIcon className=\"w-icon-sm h-icon-sm\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {parser.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{parser.description}</p>}\n\n        {/* Footer — supporting metadata, separated from the identity block above */}\n        <div className=\"mt-auto flex flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t border-[var(--color-border-subtle)] pt-2 text-xs text-text-muted\">\n          <span className=\"flex flex-wrap items-center gap-3\">\n            <span>v{parser.version}</span>\n            {parser.ttl ? <span title={`Cache TTL: ${parser.ttl} seconds`}>TTL: {parser.ttl}s</span> : null}\n          </span>\n          <span title={`Last updated: ${formatDate(parser.updatedAt)}`}>{formatRelativeTime(parser.updatedAt)}</span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default ParserCard;\n"],"mappings":"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"}

package/dist/bigconsole/components/parser/ParserSelector.js

@@ -1,296 +1,313 @@
 import { useBuildPath as e } from "../../contexts/NavigationContext.js";
 import "../../contexts/index.js";
-import t from "../../hooks/useParserOperations.js";
-import n from "./ParserTypeBadge.js";
-import r from "./ParserStatusBadge.js";
-import { Fragment as i, memo as a, useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
-import { Plus as u } from "lucide-react";
-import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as t } from "../common/sectionStyles.js";
+import "../common/index.js";
+import n from "../../hooks/useParserOperations.js";
+import r from "./ParserTypeBadge.js";
+import i from "./ParserStatusBadge.js";
+import { Fragment as a, memo as o, useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
+import { Plus as d } from "lucide-react";
+import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/bigconsole/components/parser/ParserSelector.tsx
-var m = "default", h = ({ className: e }) => /* @__PURE__ */ f("svg", {
+var h = "default", g = "sticky top-0 z-[1] bg-bg-sunken px-3 py-1.5 border-y border-[var(--color-border-default)]", _ = "text-xs font-semibold uppercase tracking-wide text-text-secondary", v = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ f("path", {
+	children: /* @__PURE__ */ p("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 9l-7 7-7-7"
 	})
-}), g = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), y = ({ className: e }) => /* @__PURE__ */ m("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
 	children: [
-		/* @__PURE__ */ f("path", {
+		/* @__PURE__ */ p("path", {
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			strokeWidth: 2,
 			d: "M12 21a9 9 0 100-18 9 9 0 000 18z"
 		}),
-		/* @__PURE__ */ f("path", {
+		/* @__PURE__ */ p("path", {
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			strokeWidth: 2,
 			d: "M3.6 9h16.8M3.6 15h16.8"
 		}),
-		/* @__PURE__ */ f("path", {
+		/* @__PURE__ */ p("path", {
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			strokeWidth: 2,
 			d: "M12 3a15 15 0 014 9 15 15 0 01-4 9 15 15 0 01-4-9 15 15 0 014-9z"
 		})
 	]
-}), _ = a(function({ parser: e, isSelected: t, onSelect: i, isGlobal: a = !1 }) {
-	let { t: o } = d();
-	return /* @__PURE__ */ f("button", {
+}), b = o(function({ parser: e, isSelected: n, onSelect: a, isGlobal: o = !1 }) {
+	let { t: s } = f();
+	return /* @__PURE__ */ p("button", {
 		type: "button",
-		onClick: () => i(e.id),
+		onClick: () => a(e.id),
 		className: `
-        w-full px-3 py-2.5
+        w-full min-h-control-md px-3 py-2.5
         text-left
         hover:bg-bg-sunken
-        transition-colors
-        border-b border-border-default last:border-b-0
-        ${t ? "bg-action-primary-bg/10" : ""}
+        motion-safe:transition-colors
+        border-b border-[var(--color-border-default)] last:border-b-0
+        ${t}
+        ${n ? "bg-action-primary-bg/10" : ""}
       `,
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "flex items-start justify-between gap-2",
-			children: [/* @__PURE__ */ p("div", {
+			children: [/* @__PURE__ */ m("div", {
 				className: "flex-1 min-w-0",
 				children: [
-					/* @__PURE__ */ p("div", {
+					/* @__PURE__ */ m("div", {
 						className: "flex items-center gap-2 mb-1",
 						children: [
-							/* @__PURE__ */ f(n, {
+							/* @__PURE__ */ p(r, {
 								type: e.type,
 								size: "sm"
 							}),
-							/* @__PURE__ */ f("span", {
+							/* @__PURE__ */ p("span", {
 								className: "text-sm font-medium text-text-primary truncate",
 								children: e.name
 							}),
-							a && /* @__PURE__ */ p("span", {
+							o && /* @__PURE__ */ m("span", {
 								className: "inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
-								children: [/* @__PURE__ */ f(g, { className: "w-3 h-3" }), o("bigconsole.parsers.selector.globalBadge", "Global")]
+								children: [/* @__PURE__ */ p(y, { className: "w-3 h-3" }), s("bigconsole.parsers.selector.globalBadge", "Global")]
 							})
 						]
 					}),
-					e.description && /* @__PURE__ */ f("p", {
+					e.description && /* @__PURE__ */ p("p", {
 						className: "text-xs text-text-secondary line-clamp-1 mb-1",
 						children: e.description
 					}),
-					/* @__PURE__ */ f("div", {
-						className: "flex items-center gap-2 text-xs text-text-tertiary",
-						children: /* @__PURE__ */ p("span", { children: [
-							e.inputSinkKey,
-							" → ",
-							e.outputKey
-						] })
+					/* @__PURE__ */ p("div", {
+						className: "flex min-w-0 items-center gap-2 text-xs text-text-muted",
+						children: /* @__PURE__ */ m("span", {
+							className: "truncate font-mono",
+							children: [
+								e.inputSinkKey,
+								" → ",
+								e.outputKey
+							]
+						})
 					})
 				]
-			}), /* @__PURE__ */ f("div", { children: /* @__PURE__ */ f(r, {
-				status: e.status,
-				size: "sm",
-				showIcon: !1
-			}) })]
+			}), /* @__PURE__ */ p("div", {
+				className: "shrink-0",
+				children: /* @__PURE__ */ p(i, {
+					status: e.status,
+					size: "sm",
+					showIcon: !1
+				})
+			})]
 		})
 	});
-}), v = a(function({ consoleId: r, value: a, onChange: g, filterType: v, filterStatus: y = "active", filterInputSinkKey: b, placeholder: x, disabled: S = !1, error: C = !1, errorMessage: w }) {
-	let { t: T } = d(), [E, D] = l(!1), [O, k] = l(""), A = x ?? T("bigconsole.parsers.selector.placeholder", "Select a parser..."), j = e(), M = r === m, { parsers: N, loading: P, fetchParsers: F } = t({
-		consoleId: r,
-		skipFetch: M
-	}), { parsers: I, loading: L, fetchParsers: R } = t({
-		consoleId: m,
-		skipFetch: M
-	}), z = c(() => {
-		if (M) return N;
-		let e = new Set(N.map((e) => e.id)), t = I.filter((t) => !e.has(t.id));
-		return [...N, ...t];
+}), x = o(function({ consoleId: i, value: o, onChange: y, filterType: x, filterStatus: S = "active", filterInputSinkKey: C, placeholder: w, disabled: T = !1, error: E = !1, errorMessage: D }) {
+	let { t: O } = f(), [k, A] = u(!1), [j, M] = u(""), N = w ?? O("bigconsole.parsers.selector.placeholder", "Select a parser..."), P = e(), F = i === h, { parsers: I, loading: L, fetchParsers: R } = n({
+		consoleId: i,
+		skipFetch: F
+	}), { parsers: z, loading: B, fetchParsers: V } = n({
+		consoleId: h,
+		skipFetch: F
+	}), H = l(() => {
+		if (F) return I;
+		let e = new Set(I.map((e) => e.id)), t = z.filter((t) => !e.has(t.id));
+		return [...I, ...t];
 	}, [
-		N,
 		I,
-		M
-	]), B = P || L, V = c(() => z.filter((e) => {
-		if (v && e.type !== v || y && e.status !== y || b && e.inputSinkKey !== b) return !1;
-		if (O) {
-			let t = O.toLowerCase();
+		z,
+		F
+	]), U = L || B, W = l(() => H.filter((e) => {
+		if (x && e.type !== x || S && e.status !== S || C && e.inputSinkKey !== C) return !1;
+		if (j) {
+			let t = j.toLowerCase();
 			return e.name.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t) || e.inputSinkKey.toLowerCase().includes(t) || e.outputKey.toLowerCase().includes(t);
 		}
 		return !0;
 	}), [
-		z,
-		v,
-		y,
-		b,
-		O
-	]), { dashboardScopedParsers: H, globalScopedParsers: U } = c(() => ({
-		dashboardScopedParsers: V.filter((e) => e.consoleId !== m),
-		globalScopedParsers: V.filter((e) => e.consoleId === m)
-	}), [V]), W = z.find((e) => e.id === a);
-	s(() => {
-		r && (F({
-			type: v,
-			status: y ?? void 0
-		}), M || R({
-			type: v,
-			status: y ?? void 0
+		H,
+		x,
+		S,
+		C,
+		j
+	]), { dashboardScopedParsers: G, globalScopedParsers: K } = l(() => ({
+		dashboardScopedParsers: W.filter((e) => e.consoleId !== h),
+		globalScopedParsers: W.filter((e) => e.consoleId === h)
+	}), [W]), q = H.find((e) => e.id === o);
+	c(() => {
+		i && (R({
+			type: x,
+			status: S ?? void 0
+		}), F || V({
+			type: x,
+			status: S ?? void 0
 		}));
 	}, [
-		r,
-		v,
-		y,
-		b,
-		F,
+		i,
+		x,
+		S,
+		C,
 		R,
-		M
+		V,
+		F
 	]);
-	let G = o((e) => {
-		g(e), D(!1), k("");
-	}, [g]), K = o(() => {
-		if (S) return;
-		let e = !E;
-		e && (F({
-			type: v,
-			status: y ?? void 0
-		}), M || R({
-			type: v,
-			status: y ?? void 0
-		})), D(e);
+	let J = s((e) => {
+		y(e), A(!1), M("");
+	}, [y]), Y = s(() => {
+		if (T) return;
+		let e = !k;
+		e && (R({
+			type: x,
+			status: S ?? void 0
+		}), F || V({
+			type: x,
+			status: S ?? void 0
+		})), A(e);
 	}, [
-		S,
-		E,
-		F,
+		T,
+		k,
 		R,
-		v,
-		y,
-		M
-	]), q = o(() => {
-		D(!1);
-	}, []), J = o(() => {
-		D(!1);
-		let e = M ? "/parsers/new" : `/dashboards/${r}/parsers/new`;
-		window.open(j(e), "_blank", "noopener,noreferrer");
+		V,
+		x,
+		S,
+		F
+	]), X = s(() => {
+		A(!1);
+	}, []), Z = s(() => {
+		A(!1);
+		let e = F ? "/parsers/new" : `/dashboards/${i}/parsers/new`;
+		window.open(P(e), "_blank", "noopener,noreferrer");
 	}, [
-		j,
-		r,
-		M
+		P,
+		i,
+		F
 	]);
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		className: "relative",
 		children: [
-			/* @__PURE__ */ p("button", {
+			/* @__PURE__ */ m("button", {
 				type: "button",
-				onClick: K,
-				disabled: S,
+				onClick: Y,
+				disabled: T,
+				"aria-haspopup": "listbox",
+				"aria-expanded": k,
 				className: `
-          w-full
+          w-full min-w-0 min-h-control-md
           px-3 py-2
           bg-bg-surface
           border rounded-md
           text-left
           flex items-center justify-between gap-2
-          transition-colors
-          ${S ? "opacity-50 cursor-not-allowed" : "hover:border-action-primary-bg cursor-pointer"}
-          ${C ? "border-status-error-border" : "border-border-default"}
-          ${E ? "border-action-primary-bg ring-2 ring-action-primary-bg/20" : ""}
+          motion-safe:transition-colors
+          ${t}
+          ${T ? "opacity-50 cursor-not-allowed" : "hover:border-action-primary-bg cursor-pointer"}
+          ${E ? "border-status-error-border" : "border-[var(--color-border-default)]"}
+          ${k ? "border-action-primary-bg ring-2 ring-action-primary-bg/20" : ""}
         `,
-				children: [/* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ p("div", {
 					className: "flex-1 min-w-0",
-					children: W ? /* @__PURE__ */ p("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ f(n, {
-							type: W.type,
+					children: q ? /* @__PURE__ */ m("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ p(r, {
+							type: q.type,
 							size: "sm"
-						}), /* @__PURE__ */ f("span", {
+						}), /* @__PURE__ */ p("span", {
 							className: "text-sm text-text-primary truncate",
-							children: W.name
+							children: q.name
 						})]
-					}) : /* @__PURE__ */ f("span", {
-						className: "text-sm text-text-tertiary",
-						children: A
+					}) : /* @__PURE__ */ p("span", {
+						className: "text-sm text-text-muted",
+						children: N
 					})
-				}), /* @__PURE__ */ f(h, { className: `w-4 h-4 text-text-secondary transition-transform ${E ? "transform rotate-180" : ""}` })]
+				}), /* @__PURE__ */ p(v, {
+					"aria-hidden": "true",
+					className: `w-4 h-4 shrink-0 text-text-secondary motion-safe:transition-transform ${k ? "transform rotate-180" : ""}`
+				})]
 			}),
-			C && w && /* @__PURE__ */ f("p", {
+			E && D && /* @__PURE__ */ p("p", {
 				className: "mt-1 text-xs text-status-error-text",
-				children: w
+				children: D
 			}),
-			E && /* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f("div", {
+			k && /* @__PURE__ */ m(a, { children: [/* @__PURE__ */ p("div", {
 				className: "fixed inset-0 z-10",
-				onClick: q
-			}), /* @__PURE__ */ p("div", {
-				className: "absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-border-default rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden",
+				onClick: X
+			}), /* @__PURE__ */ m("div", {
+				className: "absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-[var(--color-border-default)] rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden",
 				children: [
-					/* @__PURE__ */ f("div", {
-						className: "p-2 border-b border-border-default",
-						children: /* @__PURE__ */ f("input", {
+					/* @__PURE__ */ p("div", {
+						className: "p-2 border-b border-[var(--color-border-default)]",
+						children: /* @__PURE__ */ p("input", {
 							type: "text",
-							placeholder: T("bigconsole.parsers.selector.searchPlaceholder", "Search parsers..."),
-							value: O,
-							onChange: (e) => k(e.target.value),
-							className: "\n                  w-full px-3 py-2\n                  bg-bg-sunken\n                  border border-border-default\n                  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                "
+							"aria-label": O("bigconsole.parsers.selector.searchPlaceholder", "Search parsers..."),
+							placeholder: O("bigconsole.parsers.selector.searchPlaceholder", "Search parsers..."),
+							value: j,
+							onChange: (e) => M(e.target.value),
+							className: "\n                  w-full min-w-0 min-h-control-md px-3 py-2\n                  bg-bg-sunken\n                  border border-[var(--color-border-default)]\n                  rounded-md\n                  text-sm text-text-primary\n                  placeholder:text-text-muted\n                  focus:outline-none\n                  focus:border-action-primary-bg\n                  focus:ring-2\n                  focus:ring-action-primary-bg/20\n                "
 						})
 					}),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ p("div", {
 						className: "overflow-y-auto flex-1",
-						children: B ? /* @__PURE__ */ f("div", {
+						children: U ? /* @__PURE__ */ p("div", {
 							className: "p-4 text-center text-sm text-text-secondary",
-							children: T("bigconsole.parsers.selector.loading", "Loading parsers...")
-						}) : V.length === 0 ? /* @__PURE__ */ f("div", {
+							children: O("bigconsole.parsers.selector.loading", "Loading parsers...")
+						}) : W.length === 0 ? /* @__PURE__ */ p("div", {
 							className: "p-4 text-center text-sm text-text-secondary",
-							children: T("bigconsole.parsers.selector.empty", "No parsers found")
-						}) : /* @__PURE__ */ p(i, { children: [
-							/* @__PURE__ */ f("button", {
+							children: O("bigconsole.parsers.selector.empty", "No parsers found")
+						}) : /* @__PURE__ */ m(a, { children: [
+							/* @__PURE__ */ p("button", {
 								type: "button",
-								onClick: () => G(null),
+								onClick: () => J(null),
 								className: `
-                      w-full px-3 py-2
+                      w-full min-h-control-md px-3 py-2
                       text-left text-sm
                       hover:bg-bg-sunken
-                      transition-colors
-                      ${a === null ? "bg-action-primary-bg/10 text-action-primary-bg" : "text-text-secondary"}
+                      motion-safe:transition-colors
+                      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface
+                      ${o === null ? "bg-action-primary-bg/10 text-action-primary-bg" : "text-text-secondary"}
                     `,
-								children: /* @__PURE__ */ f("span", {
+								children: /* @__PURE__ */ p("span", {
 									className: "italic",
-									children: T("bigconsole.parsers.selector.none", "None")
+									children: O("bigconsole.parsers.selector.none", "None")
 								})
 							}),
-							H.length > 0 && /* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f("div", {
-								className: "px-3 py-1.5 bg-bg-sunken border-y border-border-default",
-								children: /* @__PURE__ */ f("span", {
-									className: "text-xs font-medium text-text-secondary uppercase tracking-wide",
-									children: T("bigconsole.parsers.selector.dashboardParsers", "Dashboard Parsers")
+							G.length > 0 && /* @__PURE__ */ m(a, { children: [/* @__PURE__ */ p("div", {
+								className: g,
+								children: /* @__PURE__ */ p("span", {
+									className: _,
+									children: O("bigconsole.parsers.selector.dashboardParsers", "Dashboard Parsers")
 								})
-							}), H.map((e) => /* @__PURE__ */ f(_, {
+							}), G.map((e) => /* @__PURE__ */ p(b, {
 								parser: e,
-								isSelected: a === e.id,
-								onSelect: G
+								isSelected: o === e.id,
+								onSelect: J
 							}, e.id))] }),
-							U.length > 0 && /* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f("div", {
-								className: "px-3 py-1.5 bg-bg-sunken border-y border-border-default",
-								children: /* @__PURE__ */ f("span", {
-									className: "text-xs font-medium text-text-secondary uppercase tracking-wide",
-									children: T("bigconsole.parsers.selector.globalParsers", "Global Parsers")
+							K.length > 0 && /* @__PURE__ */ m(a, { children: [/* @__PURE__ */ p("div", {
+								className: g,
+								children: /* @__PURE__ */ p("span", {
+									className: _,
+									children: O("bigconsole.parsers.selector.globalParsers", "Global Parsers")
 								})
-							}), U.map((e) => /* @__PURE__ */ f(_, {
+							}), K.map((e) => /* @__PURE__ */ p(b, {
 								parser: e,
-								isSelected: a === e.id,
-								onSelect: G,
+								isSelected: o === e.id,
+								onSelect: J,
 								isGlobal: !0
 							}, e.id))] })
 						] })
 					}),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ p("div", {
 						className: "p-2 border-t border-border-default",
-						children: /* @__PURE__ */ p("button", {
+						children: /* @__PURE__ */ m("button", {
 							type: "button",
-							onClick: J,
+							onClick: Z,
 							className: "\n                  w-full flex items-center gap-2\n                  px-3 py-2\n                  text-sm font-medium text-action-primary-bg\n                  rounded-md\n                  hover:bg-action-primary-bg/10\n                  transition-colors\n                ",
-							children: [/* @__PURE__ */ f(u, { className: "w-4 h-4" }), T("bigconsole.parsers.selector.createNew", "Create new parser")]
+							children: [/* @__PURE__ */ p(d, { className: "w-4 h-4" }), O("bigconsole.parsers.selector.createNew", "Create new parser")]
 						})
 					})
 				]
@@ -299,6 +316,6 @@ var m = "default", h = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	});
 });
 //#endregion
-export { v as default };
+export { x as default };
 
 //# sourceMappingURL=ParserSelector.js.map