{
  "name": "JobCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/JobCard.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "A job row inside the pane body. `kind=\"general\"` is a free-text\ninstruction (green tag); `kind=\"collect\"` is a named key-fact slot (pink\ntag) with an optional `title`. Drag-reorder via a wrapping `SortableList`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "JobCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "JobCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { JobCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "kind",
      "optional": false,
      "type": "\"general\" | \"collect\"",
      "doc": "Job kind — drives the tag colour + default tag label."
    },
    {
      "name": "tagLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the tag label. Defaults to \"General job\" / \"Collect Key Fact\"."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional title (used by the collect kind — the key-fact name)."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "The job instruction / description."
    },
    {
      "name": "onMenu",
      "optional": true,
      "type": "() => void",
      "doc": "Fires when the trailing kebab is clicked."
    },
    {
      "name": "menuLabel",
      "optional": true,
      "type": "string",
      "doc": "Accessible label for the kebab. Defaults to \"Job menu\"."
    }
  ],
  "classesUsed": [
    "ab-job",
    "ab-job-body",
    "ab-job-handle",
    "ab-job-menu",
    "ab-job-tag",
    "ab-job-text",
    "ab-job-title",
    "title"
  ],
  "examples": {
    "react": "<JobCard kind=\"general\">The person is a previous customer…</JobCard>\n<JobCard kind=\"collect\" title=\"Wants info on secret specials\">\n  Ask the user if they want to know about secret deals…\n</JobCard>",
    "html": null,
    "css": ".ab-job {\n  display: grid;\n  grid-template-columns: 18px 1fr auto;\n  gap: var(--s-3);\n  padding: var(--s-4);\n  /* v2.4.0: resting on-pane — transparent fill + hairline outline so jobs\n     harmonize with the (warm) pane instead of reading as white cards. The\n     --bg-paper lift returns on hover / drag as a grab cue. */\n  background: transparent;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);\n}\n\n.ab-job-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }\n\n.ab-job-handle {\n  color: var(--fg-faint); cursor: grab; padding-top: 3px;\n  font: 700 11px/1 var(--f-mono); user-select: none;\n  display: inline-flex; flex-direction: column; gap: 2px;\n}\n\n.ab-job-menu {\n  width: 24px; height: 24px; border-radius: 4px;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--fg-faint); background: transparent; border: 0; cursor: pointer;\n  font: 700 14px/1 var(--f-mono); align-self: flex-start;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.ab-job-tag {\n  align-self: flex-start;\n  display: inline-flex; align-items: center; gap: 5px;\n  font: 600 10px/1 var(--f-mono); text-transform: uppercase;\n  letter-spacing: 0.08em;\n  padding: 4px 7px; border-radius: var(--r-pill);\n}\n\n.ab-job-text {\n  font: 400 13px/1.55 var(--f-body); color: var(--fg-soft);\n  margin: 0;\n}\n\n.ab-job-title {\n  font: 600 15px/1.3 var(--f-display); color: var(--fg);\n  letter-spacing: -0.005em;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}