@burdenoff/microfe-bigconsole 2026.1004.3 → 2026.1004.5

package/dist/bigconsole/components/pipeline/PipelineCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineCard.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineCard.tsx"],"sourcesContent":["/**\n * PipelineCard Component\n *\n * Card component displaying a Pipeline summary.\n * Shows name, status, stage count, and execution stats.\n *\n * Hierarchy (BOFF-5635): the card is a tile inside the list page's `primary`\n * results section, so it carries a raised surface (border + elevation) and puts\n * its identity first. The old 96px decorative banner was the largest mass in the\n * card and carried no information — the icon is now a small puck on the identity\n * row, which roughly doubles the number of pipelines visible per screen.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { PipelineStatusBadge } from './PipelineStatusBadge';\nimport { SECTION_FOCUS_RING } from '../common';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineCardProps {\n  pipeline: Pipeline;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onTest?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\n/** Icon action button: 40px touch target, visible focus ring, no colour of its own. */\nconst ICON_ACTION = `inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors ${SECTION_FOCUS_RING}`;\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst PipelineIcon = ({ 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=\"M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3\"\n    />\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 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 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 LayersIcon = ({ 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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n    />\n  </svg>\n);\n\nconst ClockIcon = ({ 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=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineCard = memo(function PipelineCard({\n  pipeline,\n  onView,\n  onEdit,\n  onTest,\n  onDelete,\n}: PipelineCardProps) {\n  // Calculate stage count\n  const stageCount = pipeline.stages?.length ?? 0;\n\n  // Format last executed time\n  const formatLastExecuted = useCallback((dateStr: string | null): string => {\n    if (!dateStr) return 'Never run';\n    try {\n      const date = new Date(dateStr);\n      return formatDistanceToNow(date, { addSuffix: true });\n    } catch {\n      return 'Unknown';\n    }\n  }, []);\n\n  // Event handlers\n  const handleCardClick = useCallback(() => {\n    onView?.(pipeline.id);\n  }, [onView, pipeline.id]);\n\n  const handleTitleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onView?.(pipeline.id);\n    },\n    [onView, pipeline.id]\n  );\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(pipeline.id);\n    },\n    [onEdit, pipeline.id]\n  );\n\n  const handleTestClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(pipeline.id);\n    },\n    [onTest, pipeline.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(pipeline.id);\n    },\n    [onDelete, pipeline.id]\n  );\n\n  return (\n    <article\n      onClick={handleCardClick}\n      data-testid=\"pipeline-card\"\n      className=\"group flex min-w-0 cursor-pointer flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-1)] motion-safe:transition-[box-shadow,border-color] hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-elevation-2)]\"\n    >\n      {/* Identity — name first, status right, icon reduced to a puck */}\n      <div className=\"flex min-w-0 items-start gap-icon-gap border-b border-[var(--color-border-subtle)] p-4\">\n        <span\n          aria-hidden=\"true\"\n          className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-button bg-bg-sunken text-text-secondary\"\n        >\n          <PipelineIcon className=\"h-icon-md w-icon-md\" />\n        </span>\n\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"min-w-0 text-base font-semibold leading-tight text-text-primary\">\n            <button\n              type=\"button\"\n              onClick={handleTitleClick}\n              title={pipeline.name}\n              className={`block w-full truncate rounded-button text-left ${SECTION_FOCUS_RING}`}\n            >\n              {pipeline.name}\n            </button>\n          </h3>\n          {pipeline.description && (\n            <p className=\"mt-0.5 line-clamp-2 text-sm text-text-secondary\">{pipeline.description}</p>\n          )}\n        </div>\n\n        <PipelineStatusBadge status={pipeline.status} size=\"sm\" />\n      </div>\n\n      {/* Supporting facts + row actions */}\n      <div className=\"flex flex-wrap items-center justify-between gap-control-gap p-4\">\n        <dl className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">Stages</dt>\n            <LayersIcon className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" />\n            <dd>\n              {stageCount} stage{stageCount !== 1 ? 's' : ''}\n            </dd>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">Last run</dt>\n            <ClockIcon className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" />\n            <dd\n              title={\n                pipeline.lastExecutedAt\n                  ? `Last executed: ${new Date(pipeline.lastExecutedAt).toLocaleString()}`\n                  : 'Never executed'\n              }\n            >\n              {formatLastExecuted(pipeline.lastExecutedAt)}\n            </dd>\n          </div>\n        </dl>\n\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {onTest && (\n            <button\n              type=\"button\"\n              onClick={handleTestClick}\n              className={`${ICON_ACTION} hover:bg-[var(--color-status-success-bgSubtle)] hover:text-status-success-text`}\n              title=\"Test Pipeline\"\n              aria-label={`Test ${pipeline.name}`}\n            >\n              <PlayIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n          {onEdit && (\n            <button\n              type=\"button\"\n              onClick={handleEditClick}\n              className={`${ICON_ACTION} hover:bg-bg-sunken hover:text-text-primary`}\n              title=\"Edit Pipeline\"\n              aria-label={`Edit ${pipeline.name}`}\n            >\n              <EditIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n          {onDelete && (\n            <button\n              type=\"button\"\n              onClick={handleDeleteClick}\n              className={`${ICON_ACTION} hover:bg-[var(--color-status-error-bgSubtle)] hover:text-status-error-text`}\n              title=\"Delete Pipeline\"\n              aria-label={`Delete ${pipeline.name}`}\n            >\n              <DeleteIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n        </div>\n      </div>\n    </article>\n  );\n});\n\nexport default PipelineCard;\n"],"mappings":"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"}
+{"version":3,"file":"PipelineCard.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineCard.tsx"],"sourcesContent":["/**\n * PipelineCard Component\n *\n * Card component displaying a Pipeline summary.\n * Shows name, status, stage count, and execution stats.\n *\n * Hierarchy (BOFF-5635): the card is a tile inside the list page's `primary`\n * results section, so it carries a raised surface (border + elevation) and puts\n * its identity first. The old 96px decorative banner was the largest mass in the\n * card and carried no information — the icon is now a small puck on the identity\n * row, which roughly doubles the number of pipelines visible per screen.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { PipelineStatusBadge } from './PipelineStatusBadge';\nimport { SECTION_FOCUS_RING } from '../common';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineCardProps {\n  pipeline: Pipeline;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onTest?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\n/** Icon action button: 40px touch target, visible focus ring, no colour of its own. */\nconst ICON_ACTION = `inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors ${SECTION_FOCUS_RING}`;\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst PipelineIcon = ({ 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=\"M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3\"\n    />\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 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 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 LayersIcon = ({ 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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n    />\n  </svg>\n);\n\nconst ClockIcon = ({ 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=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineCard = memo(function PipelineCard({\n  pipeline,\n  onView,\n  onEdit,\n  onTest,\n  onDelete,\n}: PipelineCardProps) {\n  // Calculate stage count\n  const stageCount = pipeline.stages?.length ?? 0;\n\n  // Format last executed time\n  const formatLastExecuted = useCallback((dateStr: string | null): string => {\n    if (!dateStr) return 'Never run';\n    try {\n      const date = new Date(dateStr);\n      return formatDistanceToNow(date, { addSuffix: true });\n    } catch {\n      return 'Unknown';\n    }\n  }, []);\n\n  // Event handlers\n  const handleCardClick = useCallback(() => {\n    onView?.(pipeline.id);\n  }, [onView, pipeline.id]);\n\n  const handleTitleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onView?.(pipeline.id);\n    },\n    [onView, pipeline.id]\n  );\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(pipeline.id);\n    },\n    [onEdit, pipeline.id]\n  );\n\n  const handleTestClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(pipeline.id);\n    },\n    [onTest, pipeline.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(pipeline.id);\n    },\n    [onDelete, pipeline.id]\n  );\n\n  return (\n    <article\n      onClick={handleCardClick}\n      data-testid=\"pipeline-card\"\n      className=\"group flex min-w-0 cursor-pointer flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-1)] motion-safe:transition-[box-shadow,border-color] hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-elevation-2)]\"\n    >\n      {/* Identity — name first, status right, icon reduced to a puck */}\n      <div className=\"flex min-w-0 items-start gap-icon-gap border-b border-[var(--color-border-subtle)] p-4\">\n        <span\n          aria-hidden=\"true\"\n          className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-button bg-bg-sunken text-text-secondary\"\n        >\n          <PipelineIcon className=\"h-icon-md w-icon-md\" />\n        </span>\n\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"min-w-0 text-base font-semibold leading-tight text-text-primary\">\n            <button\n              type=\"button\"\n              onClick={handleTitleClick}\n              title={pipeline.name}\n              className={`block w-full truncate rounded-button text-left ${SECTION_FOCUS_RING}`}\n            >\n              {pipeline.name}\n            </button>\n          </h3>\n          {pipeline.description && (\n            <p className=\"mt-0.5 line-clamp-2 text-sm text-text-secondary\">{pipeline.description}</p>\n          )}\n        </div>\n\n        <PipelineStatusBadge status={pipeline.status} size=\"sm\" />\n      </div>\n\n      {stageCount > 0 && (\n        <ol aria-label=\"Stage data flow\" className=\"flex min-w-0 flex-wrap items-center gap-2 px-4 pt-4 text-xs\">\n          {pipeline.stages.map((stage, index) => (\n            <li key={stage.id} className=\"flex min-w-0 items-center gap-2\">\n              {index > 0 && (\n                <span aria-hidden=\"true\" className=\"text-text-muted\">\n                  →\n                </span>\n              )}\n              <code className=\"min-w-0 break-all rounded-button border border-[var(--color-border-subtle)] bg-bg-sunken px-2 py-1 text-text-secondary\">\n                {stage.inputKey} → {stage.outputKey}\n              </code>\n            </li>\n          ))}\n        </ol>\n      )}\n      {/* Supporting facts + row actions */}\n      <div className=\"flex flex-wrap items-center justify-between gap-control-gap p-4\">\n        <dl className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">Stages</dt>\n            <LayersIcon className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" />\n            <dd>\n              {stageCount} stage{stageCount !== 1 ? 's' : ''}\n            </dd>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">Last run</dt>\n            <ClockIcon className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" />\n            <dd\n              title={\n                pipeline.lastExecutedAt\n                  ? `Last executed: ${new Date(pipeline.lastExecutedAt).toLocaleString()}`\n                  : 'Never executed'\n              }\n            >\n              {formatLastExecuted(pipeline.lastExecutedAt)}\n            </dd>\n          </div>\n        </dl>\n\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {onTest && (\n            <button\n              type=\"button\"\n              onClick={handleTestClick}\n              className={`${ICON_ACTION} hover:bg-[var(--color-status-success-bgSubtle)] hover:text-status-success-text`}\n              title=\"Test Pipeline\"\n              aria-label={`Test ${pipeline.name}`}\n            >\n              <PlayIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n          {onEdit && (\n            <button\n              type=\"button\"\n              onClick={handleEditClick}\n              className={`${ICON_ACTION} hover:bg-bg-sunken hover:text-text-primary`}\n              title=\"Edit Pipeline\"\n              aria-label={`Edit ${pipeline.name}`}\n            >\n              <EditIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n          {onDelete && (\n            <button\n              type=\"button\"\n              onClick={handleDeleteClick}\n              className={`${ICON_ACTION} hover:bg-[var(--color-status-error-bgSubtle)] hover:text-status-error-text`}\n              title=\"Delete Pipeline\"\n              aria-label={`Delete ${pipeline.name}`}\n            >\n              <DeleteIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n        </div>\n      </div>\n    </article>\n  );\n});\n\nexport default PipelineCard;\n"],"mappings":"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"}

package/dist/bigconsole/components/pipeline/PipelineScopePicker.d.ts

@@ -0,0 +1,8 @@
+/** Console references are opaque IDs. Preserve the existing workspace scope,
+ * and let users select a real dashboard to find its parser/pipeline records. */
+export declare function PipelineScopePicker({ value, onChange, disabled, }: {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PipelineScopePicker.d.ts.map

package/dist/bigconsole/components/pipeline/PipelineScopePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineScopePicker.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/pipeline/PipelineScopePicker.tsx"],"names":[],"mappings":"AAOA;gFACgF;AAChF,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,QAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BAoCA"}

package/dist/bigconsole/components/pipeline/PipelineScopePicker.js

@@ -0,0 +1,52 @@
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import "../common/index.js";
+import t from "../../hooks/useDashboardOperations.js";
+import { BIGCONSOLE_PERMISSIONS as n } from "../../../constants/permissions.js";
+import { useId as r } from "react";
+import { usePermissions as i } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/bigconsole/components/pipeline/PipelineScopePicker.tsx
+function c({ value: c, onChange: l, disabled: u = !1 }) {
+	let d = r(), { t: f } = s(), { hasPermission: p, isLoading: m } = i(), { dashboards: h, loading: g, error: _ } = t({ skipFetch: m || !p(n.DASHBOARD_READ) });
+	return /* @__PURE__ */ o("div", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ a("label", {
+				htmlFor: d,
+				className: "mb-1 block text-sm font-medium text-text-primary",
+				children: f("bigconsole.pipelines.scope.label", "Dashboard scope")
+			}),
+			/* @__PURE__ */ o("select", {
+				id: d,
+				value: c,
+				onChange: (e) => l(e.target.value),
+				disabled: u || g,
+				className: `w-full min-w-0 rounded-input border border-[var(--color-border-subtle)] bg-bg-canvas px-3 py-2 text-sm text-text-primary ${e}`,
+				children: [
+					/* @__PURE__ */ a("option", {
+						value: "default",
+						children: f("bigconsole.pipelines.scope.workspace", "Workspace pipelines")
+					}),
+					c !== "default" && !h.some((e) => e.id === c) && /* @__PURE__ */ a("option", {
+						value: c,
+						children: c
+					}),
+					h.map((e) => /* @__PURE__ */ a("option", {
+						value: e.id,
+						children: e.name
+					}, e.id))
+				]
+			}),
+			_ && /* @__PURE__ */ a("p", {
+				role: "alert",
+				className: "mt-1 text-xs text-status-error-text",
+				children: f("bigconsole.pipelines.scope.loadError", "Dashboard scopes could not be loaded.")
+			})
+		]
+	});
+}
+//#endregion
+export { c as PipelineScopePicker };
+
+//# sourceMappingURL=PipelineScopePicker.js.map

package/dist/bigconsole/components/pipeline/PipelineScopePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineScopePicker.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineScopePicker.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useDashboardOperations } from '../../hooks/useDashboardOperations';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../constants/permissions';\nimport { SECTION_FOCUS_RING } from '../common';\n\n/** Console references are opaque IDs. Preserve the existing workspace scope,\n * and let users select a real dashboard to find its parser/pipeline records. */\nexport function PipelineScopePicker({\n  value,\n  onChange,\n  disabled = false,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  disabled?: boolean;\n}) {\n  const id = useId();\n  const { t } = useI18n();\n  const { hasPermission, isLoading } = usePermissions();\n  const { dashboards, loading, error } = useDashboardOperations({\n    skipFetch: isLoading || !hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_READ),\n  });\n  return (\n    <div className=\"min-w-0\">\n      <label htmlFor={id} className=\"mb-1 block text-sm font-medium text-text-primary\">\n        {t('bigconsole.pipelines.scope.label', 'Dashboard scope')}\n      </label>\n      <select\n        id={id}\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        disabled={disabled || loading}\n        className={`w-full min-w-0 rounded-input border border-[var(--color-border-subtle)] bg-bg-canvas px-3 py-2 text-sm text-text-primary ${SECTION_FOCUS_RING}`}\n      >\n        <option value=\"default\">{t('bigconsole.pipelines.scope.workspace', 'Workspace pipelines')}</option>\n        {value !== 'default' && !dashboards.some((dashboard) => dashboard.id === value) && (\n          <option value={value}>{value}</option>\n        )}\n        {dashboards.map((dashboard) => (\n          <option key={dashboard.id} value={dashboard.id}>\n            {dashboard.name}\n          </option>\n        ))}\n      </select>\n      {error && (\n        <p role=\"alert\" className=\"mt-1 text-xs text-status-error-text\">\n          {t('bigconsole.pipelines.scope.loadError', 'Dashboard scopes could not be loaded.')}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,EAAoB,EAClC,UACA,aACA,cAAW,MAKV;CACD,IAAM,IAAK,GAAO,EACZ,EAAE,SAAM,GAAS,EACjB,EAAE,kBAAe,iBAAc,GAAgB,EAC/C,EAAE,eAAY,YAAS,aAAU,EAAuB,EAC5D,WAAW,KAAa,CAAC,EAAc,EAAuB,eAAe,EAC9E,CAAC;AACF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,SAAD;IAAO,SAAS;IAAI,WAAU;cAC3B,EAAE,oCAAoC,kBAAkB;IACnD,CAAA;GACR,kBAAC,UAAD;IACM;IACG;IACP,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;IACjD,UAAU,KAAY;IACtB,WAAW,4HAA4H;cALzI;KAOE,kBAAC,UAAD;MAAQ,OAAM;gBAAW,EAAE,wCAAwC,sBAAsB;MAAU,CAAA;KAClG,MAAU,aAAa,CAAC,EAAW,MAAM,MAAc,EAAU,OAAO,EAAM,IAC7E,kBAAC,UAAD;MAAe;gBAAQ;MAAe,CAAA;KAEvC,EAAW,KAAK,MACf,kBAAC,UAAD;MAA2B,OAAO,EAAU;gBACzC,EAAU;MACJ,EAFI,EAAU,GAEd,CACT;KACK;;GACR,KACC,kBAAC,KAAD;IAAG,MAAK;IAAQ,WAAU;cACvB,EAAE,wCAAwC,wCAAwC;IACjF,CAAA;GAEF"}

package/dist/bigconsole/components/widgets/PropertiesPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PropertiesPanel.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/widgets/PropertiesPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAc,EAAE,KAAK,EAAE,EAA2D,MAAM,OAAO,CAAC;AAmJhG,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqWD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAiiDnD,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"PropertiesPanel.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/widgets/PropertiesPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAc,EAAE,KAAK,EAAE,EAA2D,MAAM,OAAO,CAAC;AAmJhG,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqWD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA0kDnD,CAAC;AAEH,eAAe,eAAe,CAAC"}