{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fluid-ai-workloads",
  "type": "registry:ui",
  "description": "Fluid visualization for AI workload states",
  "files": [
    {
      "path": "registry/default/ui/fluid-ai-workloads.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface FluidAIWorkloadsProps\n  extends Omit<React.ComponentProps<\"svg\">, \"width\" | \"height\"> {\n  width?: number\n  height?: number\n  backgroundColor?: string\n  cardFill?: string\n  cardStroke?: string\n  bubbleFill?: string\n  bubbleStroke?: string\n  logoColor?: string\n  lineColorTop?: string\n  lineColorUpperMid?: string\n  lineColorLowerMid?: string\n  lineColorBottom?: string\n  connectorLineColor?: string\n  connectorDotFill?: string\n  connectorDotStroke?: string\n}\n\nfunction FluidAIWorkloadsDefs({\n  shadowFilterId,\n  leftCardClipId,\n  centerLogoClipId,\n}: {\n  shadowFilterId: string\n  leftCardClipId: string\n  centerLogoClipId: string\n}) {\n  return (\n    <defs data-slot=\"fluid-ai-workloads-defs\">\n      <filter\n        id={shadowFilterId}\n        x=\"-10\"\n        y=\"-10\"\n        width=\"500\"\n        height=\"250\"\n        filterUnits=\"userSpaceOnUse\"\n      >\n        <feGaussianBlur stdDeviation=\"2\" />\n      </filter>\n      <clipPath id={leftCardClipId}>\n        <rect x=\"2\" y=\"31\" width=\"163\" height=\"130\" rx=\"12\" />\n      </clipPath>\n      <clipPath id={centerLogoClipId}>\n        <rect x=\"190.592\" y=\"62.35\" width=\"66.816\" height=\"67.013\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  )\n}\n\nfunction FluidAIWorkloadsShadowLayer({\n  shadowFilterId,\n}: {\n  shadowFilterId: string\n}) {\n  return (\n    <g\n      data-slot=\"fluid-ai-workloads-shadow-layer\"\n      opacity=\"0.04\"\n      filter={`url(#${shadowFilterId})`}\n    >\n      <rect x=\"2\" y=\"32.67\" width=\"163\" height=\"130.39\" rx=\"12\" fill=\"black\" />\n      <path\n        d=\"M191 76.76C191 70.14 196.37 64.76 203 64.76H245C251.63 64.76 257 70.14 257 76.76V118.96C257 125.59 251.63 130.96 245 130.96H203C196.37 130.96 191 125.59 191 118.96V76.76Z\"\n        fill=\"black\"\n      />\n      <path\n        d=\"M313 166.04C313 161.62 316.58 158.04 321 158.04H438C442.42 158.04 446 161.62 446 166.04V185C446 189.42 442.42 193 438 193H321C316.58 193 313 189.42 313 185V166.04Z\"\n        fill=\"black\"\n      />\n      <path\n        d=\"M313 114.89C313 110.47 316.58 106.89 321 106.89H438C442.42 106.89 446 110.47 446 114.89V133.85C446 138.27 442.42 141.85 438 141.85H321C316.58 141.85 313 138.27 313 133.85V114.89Z\"\n        fill=\"black\"\n      />\n      <path\n        d=\"M313 62.16C313 57.74 316.58 54.16 321 54.16H438C442.42 54.16 446 57.74 446 62.16V81.12C446 85.53 442.42 89.12 438 89.12H321C316.58 89.12 313 85.53 313 81.12V62.16Z\"\n        fill=\"black\"\n      />\n      <path\n        d=\"M313 11.01C313 6.59 316.58 3.01 321 3.01H438C442.42 3.01 446 6.59 446 11.01V29.96C446 34.38 442.42 37.96 438 37.96H321C316.58 37.96 313 34.38 313 29.96V11.01Z\"\n        fill=\"black\"\n      />\n    </g>\n  )\n}\n\nfunction FluidAIWorkloadsLeftCard({\n  leftCardClipId,\n  cardFill,\n  cardStroke,\n  bubbleFill,\n  bubbleStroke,\n  dotColor,\n}: {\n  leftCardClipId: string\n  cardFill: string\n  cardStroke: string\n  bubbleFill: string\n  bubbleStroke: string\n  dotColor: string\n}) {\n  return (\n    <g data-slot=\"fluid-ai-workloads-left-card\">\n      <g clipPath={`url(#${leftCardClipId})`}>\n        <rect x=\"2\" y=\"31\" width=\"163\" height=\"130\" rx=\"12\" fill={cardFill} />\n        <circle\n          cx=\"15.06\"\n          cy=\"43.76\"\n          r=\"3.26\"\n          fill={dotColor}\n          fillOpacity=\"0.08\"\n        />\n        <circle\n          cx=\"24.86\"\n          cy=\"43.76\"\n          r=\"3.26\"\n          fill={dotColor}\n          fillOpacity=\"0.08\"\n        />\n        <circle\n          cx=\"34.65\"\n          cy=\"43.76\"\n          r=\"3.26\"\n          fill={dotColor}\n          fillOpacity=\"0.08\"\n        />\n        <rect\n          x=\"17\"\n          y=\"61\"\n          width=\"98\"\n          height=\"16\"\n          rx=\"8\"\n          fill={bubbleFill}\n          stroke={bubbleStroke}\n          strokeWidth=\"1\"\n        />\n        <rect\n          x=\"17\"\n          y=\"87\"\n          width=\"49\"\n          height=\"16\"\n          rx=\"8\"\n          fill={bubbleFill}\n          stroke={bubbleStroke}\n          strokeWidth=\"1\"\n        />\n        <rect\n          x=\"101\"\n          y=\"113\"\n          width=\"50\"\n          height=\"17\"\n          rx=\"8\"\n          fill={bubbleFill}\n          stroke={bubbleStroke}\n          strokeWidth=\"1\"\n        />\n        <rect\n          x=\"17\"\n          y=\"140\"\n          width=\"65\"\n          height=\"41\"\n          rx=\"8\"\n          fill={bubbleFill}\n          stroke={bubbleStroke}\n          strokeWidth=\"1\"\n        />\n      </g>\n      <rect\n        x=\"1.5\"\n        y=\"30.5\"\n        width=\"164\"\n        height=\"131\"\n        rx=\"12.5\"\n        stroke={cardStroke}\n      />\n    </g>\n  )\n}\n\nfunction FluidAIWorkloadsCenterCard({\n  cardFill,\n  cardStroke,\n  logoColor,\n  centerLogoClipId,\n}: {\n  cardFill: string\n  cardStroke: string\n  logoColor: string\n  centerLogoClipId: string\n}) {\n  return (\n    <g data-slot=\"fluid-ai-workloads-center-card\">\n      <path\n        d=\"M245 62.35C251.85 62.35 257.41 67.9 257.41 74.76V116.96C257.41 123.81 251.85 129.36 245 129.36H203C196.15 129.36 190.59 123.81 190.59 116.96V74.76C190.59 67.9 196.15 62.35 203 62.35H245Z\"\n        fill={cardFill}\n      />\n      <path\n        d=\"M245 62.35C251.85 62.35 257.41 67.9 257.41 74.76V116.96C257.41 123.81 251.85 129.36 245 129.36H203C196.15 129.36 190.59 123.81 190.59 116.96V74.76C190.59 67.9 196.15 62.35 203 62.35H245Z\"\n        stroke={cardStroke}\n        strokeWidth=\"0.82\"\n      />\n      <g clipPath={`url(#${centerLogoClipId})`}>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M224 86.47L233.79 103.61H214.2L224 86.47Z\"\n          fill={logoColor}\n        />\n      </g>\n    </g>\n  )\n}\n\nfunction FluidAIWorkloadsBranchLines({\n  lineColorBottom,\n  lineColorTop,\n  lineColorLowerMid,\n  lineColorUpperMid,\n}: {\n  lineColorBottom: string\n  lineColorTop: string\n  lineColorLowerMid: string\n  lineColorUpperMid: string\n}) {\n  return (\n    <g data-slot=\"fluid-ai-workloads-branch-lines\">\n      <path\n        d=\"M244 95.857L276 95.858C282.63 95.858 288 101.23 288 107.86V161.09C288 167.72 293.37 173.09 300 173.09C316.05 173.09 330.36 173.09 330.36 173.09\"\n        stroke={lineColorBottom}\n        strokeWidth=\"2\"\n      />\n      <path\n        d=\"M244 95.858L276 95.857C282.63 95.857 288 90.48 288 83.86V30.63C288 24 293.37 18.63 300 18.63C316.05 18.63 330.36 18.63 330.36 18.63\"\n        stroke={lineColorTop}\n        strokeWidth=\"2\"\n      />\n      <path\n        d=\"M243.59 95.856L276 95.856C282.63 95.857 288 101.23 288 107.86V111.94C288 117.46 292.48 121.94 298 121.94C314.75 121.94 329.98 121.94 329.98 121.94\"\n        stroke={lineColorLowerMid}\n        strokeWidth=\"2\"\n      />\n      <path\n        d=\"M243.59 95.858L276 95.858C282.63 95.858 288 90.49 288 83.86V79.78C288 74.26 292.48 69.78 298 69.78C314.75 69.78 329.98 69.78 329.98 69.78\"\n        stroke={lineColorUpperMid}\n        strokeWidth=\"2\"\n      />\n    </g>\n  )\n}\n\nfunction FluidAIWorkloadsRightCards({\n  cardFill,\n  cardStroke,\n  connectorDotFill,\n  connectorDotStroke,\n}: {\n  cardFill: string\n  cardStroke: string\n  connectorDotFill: string\n  connectorDotStroke: string\n}) {\n  return (\n    <g data-slot=\"fluid-ai-workloads-right-cards\">\n      <path\n        d=\"M438 0.5C442.69 0.5 446.5 4.31 446.5 9V27.96C446.5 32.65 442.69 36.46 438 36.46H321C316.31 36.46 312.5 32.65 312.5 27.96V9C312.5 4.31 316.31 0.5 321 0.5H438Z\"\n        fill={cardFill}\n      />\n      <path\n        d=\"M438 0.5C442.69 0.5 446.5 4.31 446.5 9V27.96C446.5 32.65 442.69 36.46 438 36.46H321C316.31 36.46 312.5 32.65 312.5 27.96V9C312.5 4.31 316.31 0.5 321 0.5H438Z\"\n        stroke={cardStroke}\n      />\n\n      <path\n        d=\"M438 51.65C442.69 51.65 446.5 55.46 446.5 60.15V79.11C446.5 83.8 442.69 87.61 438 87.61H321C316.31 87.61 312.5 83.8 312.5 79.11V60.15C312.5 55.46 316.31 51.65 321 51.65H438Z\"\n        fill={cardFill}\n      />\n      <path\n        d=\"M438 51.65C442.69 51.65 446.5 55.46 446.5 60.15V79.11C446.5 83.8 442.69 87.61 438 87.61H321C316.31 87.61 312.5 83.8 312.5 79.11V60.15C312.5 55.46 316.31 51.65 321 51.65H438Z\"\n        stroke={cardStroke}\n      />\n      <circle\n        cx=\"312.27\"\n        cy=\"69.65\"\n        r=\"3.76\"\n        fill={connectorDotFill}\n        stroke={connectorDotStroke}\n      />\n\n      <path\n        d=\"M438 104.38C442.69 104.38 446.5 108.19 446.5 112.88V131.84C446.5 136.54 442.69 140.34 438 140.34H321C316.31 140.34 312.5 136.54 312.5 131.84V112.88C312.5 108.19 316.31 104.38 321 104.38H438Z\"\n        fill={cardFill}\n      />\n      <path\n        d=\"M438 104.38C442.69 104.38 446.5 108.19 446.5 112.88V131.84C446.5 136.54 442.69 140.34 438 140.34H321C316.31 140.34 312.5 136.54 312.5 131.84V112.88C312.5 108.19 316.31 104.38 321 104.38H438Z\"\n        stroke={cardStroke}\n      />\n      <circle\n        cx=\"312.5\"\n        cy=\"121.88\"\n        r=\"3.76\"\n        fill={connectorDotFill}\n        stroke={connectorDotStroke}\n      />\n\n      <path\n        d=\"M438 155.54C442.69 155.54 446.5 159.34 446.5 164.04V182.99C446.5 187.69 442.69 191.49 438 191.49H321C316.31 191.49 312.5 187.69 312.5 182.99V164.04C312.5 159.34 316.31 155.54 321 155.54H438Z\"\n        fill={cardFill}\n      />\n      <path\n        d=\"M438 155.54C442.69 155.54 446.5 159.34 446.5 164.04V182.99C446.5 187.69 442.69 191.49 438 191.49H321C316.31 191.49 312.5 187.69 312.5 182.99V164.04C312.5 159.34 316.31 155.54 321 155.54H438Z\"\n        stroke={cardStroke}\n      />\n      <circle\n        cx=\"312.27\"\n        cy=\"173.04\"\n        r=\"3.76\"\n        fill={connectorDotFill}\n        stroke={connectorDotStroke}\n      />\n    </g>\n  )\n}\n\nfunction FluidAIWorkloads({\n  width = 448,\n  height = 195,\n  backgroundColor = \"var(--background)\",\n  cardFill = \"var(--card)\",\n  cardStroke = \"var(--border)\",\n  bubbleFill = \"var(--muted)\",\n  bubbleStroke = \"var(--border)\",\n  logoColor = \"var(--foreground)\",\n  lineColorTop = \"#52AEFF\",\n  lineColorUpperMid = \"#E5484D\",\n  lineColorLowerMid = \"#FFB224\",\n  lineColorBottom = \"#45DEC4\",\n  connectorLineColor = \"var(--muted-foreground)\",\n  connectorDotFill = \"var(--card)\",\n  connectorDotStroke = \"var(--border)\",\n  className,\n  ...props\n}: FluidAIWorkloadsProps) {\n  const idBase = React.useId().replaceAll(\":\", \"\")\n  const shadowFilterId = `${idBase}-shadow-filter`\n  const leftCardClipId = `${idBase}-left-card-clip`\n  const centerLogoClipId = `${idBase}-center-logo-clip`\n\n  return (\n    <svg\n      data-slot=\"fluid-ai-workloads\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 448 195\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(className)}\n      {...props}\n    >\n      <title>Fluid AI workloads illustration</title>\n      <rect width=\"448\" height=\"195\" fill={backgroundColor} />\n      <FluidAIWorkloadsDefs\n        shadowFilterId={shadowFilterId}\n        leftCardClipId={leftCardClipId}\n        centerLogoClipId={centerLogoClipId}\n      />\n      <FluidAIWorkloadsShadowLayer shadowFilterId={shadowFilterId} />\n      <FluidAIWorkloadsLeftCard\n        leftCardClipId={leftCardClipId}\n        cardFill={cardFill}\n        cardStroke={cardStroke}\n        bubbleFill={bubbleFill}\n        bubbleStroke={bubbleStroke}\n        dotColor={logoColor}\n      />\n      <path\n        data-slot=\"fluid-ai-workloads-connector\"\n        d=\"M166.047 95.856H191.348\"\n        stroke={connectorLineColor}\n        strokeWidth=\"1.63\"\n      />\n      <FluidAIWorkloadsCenterCard\n        cardFill={cardFill}\n        cardStroke={cardStroke}\n        logoColor={logoColor}\n        centerLogoClipId={centerLogoClipId}\n      />\n      <FluidAIWorkloadsBranchLines\n        lineColorBottom={lineColorBottom}\n        lineColorTop={lineColorTop}\n        lineColorLowerMid={lineColorLowerMid}\n        lineColorUpperMid={lineColorUpperMid}\n      />\n      <FluidAIWorkloadsRightCards\n        cardFill={cardFill}\n        cardStroke={cardStroke}\n        connectorDotFill={connectorDotFill}\n        connectorDotStroke={connectorDotStroke}\n      />\n    </svg>\n  )\n}\n\nexport {\n  FluidAIWorkloads,\n  FluidAIWorkloadsDefs,\n  FluidAIWorkloadsShadowLayer,\n  FluidAIWorkloadsLeftCard,\n  FluidAIWorkloadsCenterCard,\n  FluidAIWorkloadsBranchLines,\n  FluidAIWorkloadsRightCards,\n}\n",
      "type": "registry:ui"
    }
  ]
}