{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marker-story",
  "title": "Marker Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Storybook stories demonstrating marker component status rows, separators, icons, links, and buttons",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "marker",
    "spinner"
  ],
  "files": [
    {
      "path": "registry/ui/marker-story/marker-radix.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport {\n  BookOpenCheckIcon,\n  CheckIcon,\n  FileTextIcon,\n  GitBranchIcon,\n  RotateCcwIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { expect, userEvent, within } from \"storybook/test\";\n\nimport {\n  Marker,\n  MarkerContent,\n  MarkerIcon,\n} from \"@/components/ui/marker\";\nimport { Spinner } from \"@/components/ui/spinner\";\n\n/**\n * Displays inline conversation status, notes, actions, and separators.\n */\nconst meta: Meta<typeof Marker> = {\n  title: \"ui/radix/Marker\",\n  component: Marker,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n  argTypes: {\n    variant: {\n      control: \"select\",\n      options: [\"default\", \"separator\", \"border\"],\n    },\n  },\n  args: {\n    variant: \"default\",\n  },\n  decorators: (Story) => (\n    <div className=\"w-full min-w-sm max-w-md\">\n      <Story />\n    </div>\n  ),\n} satisfies Meta<typeof Marker>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default marker for inline notes and status updates.\n */\nexport const Default: Story = {\n  render: (args) => (\n    <Marker {...args}>\n      <MarkerContent>Explored 4 files</MarkerContent>\n    </Marker>\n  ),\n};\n\n/**\n * Use the border variant for status rows that separate the next row.\n */\nexport const Border: Story = {\n  args: {\n    variant: \"border\",\n  },\n  render: (args) => (\n    <Marker {...args}>\n      <MarkerContent>Opened implementation notes</MarkerContent>\n    </Marker>\n  ),\n};\n\n/**\n * Use the separator variant for date breaks or labeled transcript sections.\n */\nexport const Separator: Story = {\n  args: {\n    variant: \"separator\",\n  },\n  render: (args) => (\n    <Marker {...args}>\n      <MarkerContent>Today</MarkerContent>\n    </Marker>\n  ),\n};\n\n/**\n * Use `role=\"status\"` for progress markers that should be announced.\n */\nexport const Status: Story = {\n  render: (args) => (\n    <Marker {...args} role=\"status\">\n      <MarkerIcon>\n        <Spinner />\n      </MarkerIcon>\n      <MarkerContent>Compacting conversation</MarkerContent>\n    </Marker>\n  ),\n};\n\n/**\n * Add shimmer to streaming or in-progress marker text.\n */\nexport const Shimmer: Story = {\n  render: (args) => (\n    <Marker {...args}>\n      <MarkerContent className=\"shimmer\">Thinking...</MarkerContent>\n    </Marker>\n  ),\n};\n\n/**\n * Add an icon to make a system note easier to scan.\n */\nexport const WithIcon: Story = {\n  render: (args) => (\n    <Marker {...args}>\n      <MarkerIcon>\n        <GitBranchIcon />\n      </MarkerIcon>\n      <MarkerContent>Switched to a new branch</MarkerContent>\n    </Marker>\n  ),\n};\n\n/**\n * Render a marker as a button for inline transcript actions.\n */\nexport const ButtonMarker: Story = {\n  render: (args) => (\n    <Marker {...args} asChild>\n      <button type=\"button\">\n        <MarkerIcon>\n          <RotateCcwIcon />\n        </MarkerIcon>\n        <MarkerContent>Revert this change</MarkerContent>\n      </button>\n    </Marker>\n  ),\n};\n\n/**\n * Render a marker as a link when the note navigates to related context.\n */\nexport const LinkMarker: Story = {\n  render: (args) => (\n    <Marker {...args} asChild>\n      <a href=\"#pull-request\">\n        <MarkerContent>View the pull request</MarkerContent>\n      </a>\n    </Marker>\n  ),\n};\n\n/**\n * Compose a short timeline with separators, bordered rows, and icon markers.\n */\nexport const Timeline: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-4\">\n      <Marker variant=\"separator\">\n        <MarkerContent>Today</MarkerContent>\n      </Marker>\n      <Marker variant=\"border\">\n        <MarkerIcon>\n          <SearchIcon />\n        </MarkerIcon>\n        <MarkerContent>Reviewed 8 related files</MarkerContent>\n      </Marker>\n      <Marker>\n        <MarkerIcon>\n          <BookOpenCheckIcon />\n        </MarkerIcon>\n        <MarkerContent>Implementation notes are up to date</MarkerContent>\n      </Marker>\n    </div>\n  ),\n};\n\n/**\n * Verify interactive markers expose a button and respond to clicks.\n */\nexport const ButtonInteraction: Story = {\n  tags: [\"!dev\", \"!autodocs\"],\n  render: () => (\n    <Marker asChild>\n      <button type=\"button\">\n        <MarkerIcon>\n          <CheckIcon />\n        </MarkerIcon>\n        <MarkerContent>Mark as resolved</MarkerContent>\n      </button>\n    </Marker>\n  ),\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const button = canvas.getByRole(\"button\", { name: /mark as resolved/i });\n\n    await userEvent.click(button);\n    expect(button).toHaveFocus();\n  },\n};\n\n/**\n * Verify status markers keep progress text available to assistive tech.\n */\nexport const StatusAnnounced: Story = {\n  tags: [\"!dev\", \"!autodocs\"],\n  render: () => (\n    <Marker role=\"status\">\n      <MarkerIcon>\n        <FileTextIcon />\n      </MarkerIcon>\n      <MarkerContent>Reading project files</MarkerContent>\n    </Marker>\n  ),\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    expect(canvas.getByRole(\"status\")).toHaveTextContent(\n      \"Reading project files\",\n    );\n  },\n};\n",
      "type": "registry:component",
      "target": "@ui/marker.stories.tsx"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "marker",
    "chat"
  ],
  "type": "registry:component"
}