{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "log-line",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "log-line.tsx",
      "target": "components/ui/log-line.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Log levels, not semantic roles. Callers think in `warn`; the tokens they\n * resolve to are `warning`, `danger`, `info`, `success`.\n */\nexport type LogLevel = \"error\" | \"warn\" | \"info\" | \"debug\" | \"success\";\n\nconst railTone: Record<LogLevel, string> = {\n  error: \"text-danger\",\n  warn: \"text-warning\",\n  info: \"text-info\",\n  debug: \"text-border-strong\",\n  success: \"text-success\",\n};\n\nconst levelTone: Record<LogLevel, string> = {\n  error: \"text-danger\",\n  warn: \"text-warning\",\n  info: \"text-info\",\n  debug: \"text-muted\",\n  success: \"text-success\",\n};\n\nconst countTone: Record<LogLevel, string> = {\n  error: \"border-danger/25 bg-danger/12 text-danger\",\n  warn: \"border-warning/25 bg-warning/12 text-warning\",\n  info: \"border-info/25 bg-info/12 text-info\",\n  debug: \"border-border bg-surface-2 text-muted\",\n  success: \"border-success/25 bg-success/12 text-success\",\n};\n\nexport interface LogLineProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  level: LogLevel;\n  /** Endpoint, module, or subsystem the line came from. */\n  source?: React.ReactNode;\n  /** Repeat collapsing. Values at or below 1 render no chip. */\n  count?: number;\n  /**\n   * Stack trace or payload. Its presence swaps the row element from `div` to\n   * `details`, which remounts the row. Treat it as static per log entry.\n   */\n  details?: React.ReactNode;\n  timestamp?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport const LogLine = React.forwardRef<HTMLElement, LogLineProps>(\n  (\n    { className, level, source, count, details, timestamp, children, ...props },\n    ref,\n  ) => {\n    const row = (\n      <>\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"absolute inset-y-0 left-0 w-[3px] bg-current\",\n            \"shadow-[0_0_12px_-2px_currentColor]\",\n            railTone[level],\n          )}\n        />\n        {timestamp != null && (\n          <span className=\"shrink-0 text-[0.6875rem] tabular-nums text-muted\">\n            {timestamp}\n          </span>\n        )}\n        <span\n          className={cn(\n            \"shrink-0 text-[0.625rem] font-semibold uppercase leading-none tracking-[0.1em]\",\n            levelTone[level],\n          )}\n        >\n          {level}\n        </span>\n        {source != null && (\n          <span className=\"shrink-0 whitespace-nowrap text-muted\">\n            {source}\n            <span aria-hidden=\"true\" className=\"text-faint\">\n              {\" ·\"}\n            </span>\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1 text-ink\">{children}</span>\n        {count != null && count > 1 && (\n          <span\n            data-log-count=\"\"\n            className={cn(\n              \"shrink-0 rounded-full border px-1.5 text-[0.625rem] leading-tight tabular-nums\",\n              countTone[level],\n            )}\n          >\n            <span aria-hidden=\"true\">{\"×\"}</span>\n            <span className=\"sr-only\">repeated </span>\n            {count}\n            <span className=\"sr-only\"> times</span>\n          </span>\n        )}\n      </>\n    );\n\n    const shell = cn(\n      \"relative flex items-baseline gap-3 py-2 pl-4 pr-3\",\n      \"font-mono text-xs leading-relaxed\",\n      \"transition-tint hover:bg-surface-2 motion-reduce:transition-none\",\n      className,\n    );\n\n    if (details == null)\n      return (\n        <div\n          ref={ref as React.Ref<HTMLDivElement>}\n          className={shell}\n          {...props}\n        >\n          {row}\n        </div>\n      );\n\n    return (\n      <details ref={ref as React.Ref<HTMLDetailsElement>} {...props}>\n        <summary\n          className={cn(\n            shell,\n            \"cursor-pointer list-none [&::-webkit-details-marker]:hidden\",\n          )}\n        >\n          {row}\n        </summary>\n        <div\n          // A scrolling region has to be reachable by keyboard (WCAG 2.1.1), which\n          // is the documented exception to this rule.\n          // biome-ignore lint/a11y/noNoninteractiveTabindex: see above\n          tabIndex={0}\n          className=\"ml-4 overflow-x-auto whitespace-pre border-l-2 border-border-strong py-2 pl-3 font-mono text-[0.6875rem] text-muted outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent\"\n        >\n          {details}\n        </div>\n      </details>\n    );\n  },\n);\nLogLine.displayName = \"LogLine\";\n\nexport type LogListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Surface, border, and hairline dividers for a stack of LogLines. Announced as\n * a polite log region, so appended lines reach a screen reader without stealing\n * focus.\n */\nexport const LogList = React.forwardRef<HTMLDivElement, LogListProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"log\"\n      aria-live=\"polite\"\n      className={cn(\n        \"overflow-hidden rounded-lg border border-border bg-surface\",\n        \"divide-y divide-border\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLogList.displayName = \"LogList\";\n\nexport interface InlineErrorProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  error: Error | string;\n  source?: React.ReactNode;\n}\n\n/**\n * A single error LogLine in its own bordered surface, for sitting beside a\n * panel that failed to load. Announced as an alert, unlike LogList's polite\n * region: a failed fetch is worth interrupting for.\n */\nexport const InlineError = React.forwardRef<HTMLDivElement, InlineErrorProps>(\n  ({ className, error, source, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"alert\"\n      className={cn(\n        \"overflow-hidden rounded-lg border border-danger/25 bg-surface\",\n        className,\n      )}\n      {...props}\n    >\n      <LogLine level=\"error\" source={source}>\n        {typeof error === \"string\" ? error : error.message}\n      </LogLine>\n    </div>\n  ),\n);\nInlineError.displayName = \"InlineError\";\n"
    }
  ]
}