{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marker","title":"Marker","description":"Show a line in a conversation that is not a message, such as a status, a note or a date. Search terms: status line, system message, date separator, divider, thinking, typing indicator.","dependencies":[],"registryDependencies":["@siteplane/base","@siteplane/separator"],"files":[{"path":"packages/ui/src/components/marker/marker.tsx","content":"import type React from \"react\";\n\nimport { cn } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\nimport { Separator } from \"../separator\";\n\nimport \"./marker.css\";\n\nexport type MarkerVariant = \"default\" | \"border\" | \"separator\";\n\nexport type MarkerProps = React.ComponentProps<\"div\"> & {\n  /**\n   * `default` is an inline line of status or notes; `border` adds a bottom\n   * border under the row; `separator` puts the content between two divider\n   * lines, for a date, a section break or a checkpoint.\n   */\n  variant?: MarkerVariant | undefined;\n};\n\n/**\n * A line in a conversation that is not a message: a live status, a system\n * note, a labeled divider or a checkpoint. It has no role by default; pass\n * `role=\"status\"` for a live status line. A divider that carries a label needs\n * no role, so the label is read as text.\n */\nexport function Marker({\n  children,\n  className,\n  variant = \"default\",\n  ...props\n}: MarkerProps): React.ReactElement {\n  return (\n    <div\n      className={cn(slotClass(\"marker\", props), className)}\n      data-slot=\"marker\"\n      data-variant={variant}\n      {...props}\n    >\n      {variant === \"separator\" ? (\n        <>\n          {/* The lines are decoration; the label between them is the content. */}\n          <Separator role=\"presentation\" />\n          <span className=\"sp-marker-center\">{children}</span>\n          <Separator role=\"presentation\" />\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n\n/** A decorative icon before the content. It is hidden from assistive technology. */\nexport function MarkerIcon({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(slotClass(\"marker-icon\", props), className)}\n      data-slot=\"marker-icon\"\n      {...props}\n    />\n  );\n}\n\n/**\n * The text of the marker. Put an action, such as a Button, beside it in the\n * Marker.\n */\nexport function MarkerContent({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(slotClass(\"marker-content\", props), className)}\n      data-slot=\"marker-content\"\n      {...props}\n    />\n  );\n}\n","type":"registry:ui","target":"~/src/siteplane/components/marker/marker.tsx"},{"path":"packages/ui/src/components/marker/marker.css","content":"@layer theme, base, components, siteplane, utilities;\n\n@layer siteplane {\n  /* A line in a conversation that is not a message: one row of quiet text\n   * with an optional icon, as wide as the thread. */\n  :where(.sp-marker) {\n    display: flex;\n    align-items: center;\n    gap: var(--sp-rw-space-2);\n    width: 100%;\n    min-width: 0;\n    color: var(--sp-rw-fg-tertiary);\n    font-size: var(--sp-rw-font-14);\n    line-height: var(--sp-rw-line-21);\n    text-align: start;\n  }\n\n  /* A bottom border under the row, in the color of the kit's dividers. */\n  .sp-marker[data-variant=\"border\"] {\n    padding-block-end: var(--sp-rw-space-2);\n    border-block-end: var(--sp-rw-border-default) solid\n      var(--sp-rw-border-translucent);\n  }\n\n  /* The content sits between two divider lines. The lines are the kit's\n   * Separator, which brings its color and thickness; they share the room the\n   * label leaves and give way first when it is long. */\n  .sp-marker[data-variant=\"separator\"] {\n    gap: var(--sp-rw-space-3);\n    text-align: center;\n  }\n\n  .sp-marker > .sp-separator {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n\n  /* The icon, the text and an action of a divider stay together between the\n   * lines, closer to one another than to the lines. */\n  :where(.sp-marker-center) {\n    display: inline-flex;\n    flex: 0 1 auto;\n    align-items: center;\n    gap: var(--sp-rw-space-2);\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  /* A decorative icon of 16 px (I3); a size class on the icon wins. Its box is\n   * one text line high at the start of the row, so beside text that wraps it\n   * stays on the first line, as an Alert's icon does. */\n  :where(.sp-marker-icon) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-self: flex-start;\n    align-items: center;\n    justify-content: center;\n    height: var(--sp-rw-line-21);\n  }\n\n  :where(.sp-marker-icon > svg:not([class*=\"size-\"])) {\n    width: var(--sp-rw-control-icon);\n    height: var(--sp-rw-control-icon);\n  }\n\n  /* The text wraps long values instead of widening the thread (K5). */\n  :where(.sp-marker-content) {\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n}\n","type":"registry:ui","target":"~/src/siteplane/components/marker/marker.css"},{"path":"packages/ui/src/components/marker/index.ts","content":"export * from \"./marker\";\n","type":"registry:ui","target":"~/src/siteplane/components/marker/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/marker.md","categories":["Chat & AI"],"meta":{"avoidWhen":["Avoid for the steps an agent took, such as its tool calls; use Trace.","Avoid for a message from a person or the assistant; use Message with a Bubble."],"description":"Show a line in a conversation that is not a message, such as a status, a note or a date.","knownLimitations":["A marker has no role by default. Pass role=\"status\" for a line that changes, such as a live status.","There is no render prop, so an action such as Restore is a Button inside the marker."],"providerNotes":["The separator variant draws the kit Separator, which the registry installs with the marker."],"releaseStatus":"preview","searchTerms":["marker","status line","system message","date separator","divider","thinking","typing indicator"],"useWhen":["Use for a live status such as Thinking, a system note such as a change of model, a date between turns or a note that a reply was stopped."]}}