@ds-mo/ui 13.6.0 → 13.7.0

package/dist/mcp-data/registry/chart-donut.json

@@ -1,344 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chart-donut",
-  "title": "ChartDonut",
-  "description": "Part-to-whole donut chart with a center aggregate, responsive fill sizing, local slice tooltip feedback, and externally controlled legend highlighting.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chart-donut",
-    "source": "src/wc/components/ChartDonut/ChartDonut.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Part-to-whole donut chart with a center aggregate, responsive fill sizing, local slice tooltip feedback, and externally controlled legend highlighting.",
-      "useWhen": [
-        "Users need to understand a small part-to-whole breakdown with a prominent total or status in the center.",
-        "A standalone donut needs pointer and keyboard-focus value feedback through a chart-owned data-viz tooltip.",
-        "A donut and visible ChartLegend should cross-highlight by matching stable labels."
-      ],
-      "avoidWhen": [
-        "The data is a trend, time sequence, or independent magnitude comparison.",
-        "The category count creates slices too small to understand reliably.",
-        "Hover is intended to select, filter, or navigate rather than temporarily highlight data."
-      ],
-      "alternatives": [
-        {
-          "when": "The product needs the canonical card, filter action, visible legend, and built-in hover synchronization.",
-          "component": "component:ds-card-data-viz",
-          "reason": "The donut card variant owns that complete composition and suppresses redundant slice tooltips."
-        },
-        {
-          "when": "Users need to compare independent category magnitudes.",
-          "component": "component:ds-chart-bar",
-          "reason": "Bars make category magnitude differences easier to compare."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-chart-legend",
-        "component:ds-tooltip-data-viz",
-        "component:ds-card-data-viz"
-      ],
-      "accessibility": [
-        "Every non-empty slice remains keyboard focusable and exposes its label and value without depending on the visual tooltip.",
-        "Use a visible legend when the full set of labels, values, or percentages must remain continuously available.",
-        "Provide localized no-data text for the neutral empty ring.",
-        "Center text is a visual summary and must not be the only source of essential category detail."
-      ],
-      "states": [
-        "Genuine local pointer or keyboard focus may show a chart-owned tooltip; externally synchronized highlight never opens it.",
-        "When a visible legend already owns label and value detail, suppress the redundant donut tooltip. CardDataViz donut mode does this automatically.",
-        "Local hover and external highlight remain separate while both may dim non-matching slices.",
-        "Zero or negative totals render a neutral empty ring without interactive slices.",
-        "Center value and caption truncate when they exceed the safe inner-circle measure."
-      ],
-      "responsiveBehavior": [
-        "Prefer container-fill sizing inside data-viz cards and explicit sizing only in layouts that own a stable diameter.",
-        "Fill sizing remains centered and constrained to the shared donut size band.",
-        "Changing the measured diameter changes the ring radius without scaling its token-based thickness, typography, focus stroke, or corner treatment.",
-        "The owner adapts category count and legend placement for available space."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign data as a JavaScript property and wire slice-hover detail to a sibling legend only when not using CardDataViz donut mode."
-        ],
-        "react": [
-          "Keep synchronized highlight controlled by the composition and disable slice tooltips when a sibling legend continuously shows the same details."
-        ],
-        "angular": [
-          "Keep synchronized highlight controlled by the composition and disable slice tooltips when a sibling legend continuously shows the same details."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/ChartDonut/ChartDonut.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "activeLabel": {
-          "type": "string | null",
-          "resolvedType": "null | string",
-          "attribute": "active-label",
-          "default": "null",
-          "required": false,
-          "mutable": false,
-          "description": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n`ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\nFalls back to this component's own pointer/focus hover when unset.\nSlice hover dims peer slices and emits `dsSliceHover` for legend sync. External\nhighlight never opens the local tooltip."
-        },
-        "centerCaption": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "center-caption",
-          "required": false,
-          "mutable": false,
-          "description": "Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase."
-        },
-        "centerValue": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "center-value",
-          "required": false,
-          "mutable": false,
-          "description": "Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\")."
-        },
-        "cornerRadius": {
-          "type": "number | string",
-          "resolvedType": "number | string",
-          "attribute": "corner-radius",
-          "default": "TOKEN_DEFAULTS.radius025",
-          "required": false,
-          "mutable": false,
-          "description": "Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px)."
-        },
-        "data": {
-          "type": "ChartDatum[]",
-          "resolvedType": "ChartDatum[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Slices to render. Set as a JS property (not an HTML attribute)."
-        },
-        "gap": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "gap",
-          "default": "1",
-          "required": false,
-          "mutable": false,
-          "description": "Gap between slices, in degrees."
-        },
-        "locale": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "locale",
-          "required": false,
-          "mutable": false
-        },
-        "noDataLabel": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "no-data-label",
-          "default": "'No data'",
-          "required": false,
-          "mutable": false
-        },
-        "showTooltip": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "show-tooltip",
-          "default": "true",
-          "required": false,
-          "mutable": false,
-          "description": "Show a chart-owned value callout for genuine pointer or keyboard focus.\nDisable when a visible legend already owns persistent label and value detail."
-        },
-        "size": {
-          "type": "number | undefined",
-          "resolvedType": "number | undefined",
-          "attribute": "size",
-          "required": false,
-          "mutable": false,
-          "description": "Explicit diameter in px. When unset, the donut sizes to its container\n(ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and\n`* 24` (192px), and stays centered in the leftover space. Prefer unset\ninside card layouts."
-        },
-        "thickness": {
-          "type": "number | string",
-          "resolvedType": "number | string",
-          "attribute": "thickness",
-          "default": "TOKEN_DEFAULTS.size200",
-          "required": false,
-          "mutable": false,
-          "description": "Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px)."
-        }
-      },
-      "events": [
-        {
-          "name": "dsSliceHover",
-          "detail": "ChartDatum | null",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Fires with the hovered/focused slice's datum, or `null` on leave/blur."
-        }
-      ],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "activeLabel": {
-        "type": "string | null",
-        "resolvedType": "null | string",
-        "attribute": "active-label",
-        "default": "null",
-        "required": false,
-        "mutable": false,
-        "description": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n`ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\nFalls back to this component's own pointer/focus hover when unset.\nSlice hover dims peer slices and emits `dsSliceHover` for legend sync. External\nhighlight never opens the local tooltip."
-      },
-      "centerCaption": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "center-caption",
-        "required": false,
-        "mutable": false,
-        "description": "Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase."
-      },
-      "centerValue": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "center-value",
-        "required": false,
-        "mutable": false,
-        "description": "Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\")."
-      },
-      "cornerRadius": {
-        "type": "number | string",
-        "resolvedType": "number | string",
-        "attribute": "corner-radius",
-        "default": "TOKEN_DEFAULTS.radius025",
-        "required": false,
-        "mutable": false,
-        "description": "Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px)."
-      },
-      "data": {
-        "type": "ChartDatum[]",
-        "resolvedType": "ChartDatum[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Slices to render. Set as a JS property (not an HTML attribute)."
-      },
-      "gap": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "gap",
-        "default": "1",
-        "required": false,
-        "mutable": false,
-        "description": "Gap between slices, in degrees."
-      },
-      "locale": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "locale",
-        "required": false,
-        "mutable": false
-      },
-      "noDataLabel": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "no-data-label",
-        "default": "'No data'",
-        "required": false,
-        "mutable": false
-      },
-      "showTooltip": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "show-tooltip",
-        "default": "true",
-        "required": false,
-        "mutable": false,
-        "description": "Show a chart-owned value callout for genuine pointer or keyboard focus.\nDisable when a visible legend already owns persistent label and value detail."
-      },
-      "size": {
-        "type": "number | undefined",
-        "resolvedType": "number | undefined",
-        "attribute": "size",
-        "required": false,
-        "mutable": false,
-        "description": "Explicit diameter in px. When unset, the donut sizes to its container\n(ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and\n`* 24` (192px), and stays centered in the leftover space. Prefer unset\ninside card layouts."
-      },
-      "thickness": {
-        "type": "number | string",
-        "resolvedType": "number | string",
-        "attribute": "thickness",
-        "default": "TOKEN_DEFAULTS.size200",
-        "required": false,
-        "mutable": false,
-        "description": "Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px)."
-      }
-    },
-    "events": [
-      {
-        "name": "dsSliceHover",
-        "detail": "ChartDatum | null",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Fires with the hovered/focused slice's datum, or `null` on leave/blur."
-      }
-    ],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-chart-donut",
-      "react": "DsChartDonut",
-      "angular": "DsChartDonut"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-chart-donut.js';",
-        "example": "<ds-chart-donut></ds-chart-donut>"
-      },
-      "react": {
-        "import": "import { DsChartDonut } from '@ds-mo/ui/react';",
-        "example": "<DsChartDonut />"
-      },
-      "angular": {
-        "import": "import { DsChartDonut } from '@ds-mo/ui/angular/ds-chart-donut';",
-        "example": "<ds-chart-donut></ds-chart-donut>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: data.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.1.1",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "tooltip-data-viz"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/ChartDonut/ChartDonut.css",
-      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n:host(.chart-donut--fill) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n  overflow: visible;\n}\n\n:host(.chart-donut--fill) .chart-donut__wrapper {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.chart-donut__svg path {\n  cursor: default;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__slice--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-donut__svg path {\n    transition: none;\n  }\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-title-large + emphasis (SVG cannot host ds-text). */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xl);\n  line-height: var(--typography-lineheight-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Matches ds-text text-body-medium regular. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (forced-colors: active) {\n  .chart-donut__svg path {\n    forced-color-adjust: none;\n  }\n\n  .chart-donut__svg path:focus-visible {\n    stroke: var(--ds-forced-color-selected);\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/ChartDonut/ChartDonut.tsx",
-      "content": "import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\n/** Gap between the center value and caption line boxes. */\nconst CENTER_GAP_PX = 0;\n/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n/** Fallback when filling before the first ResizeObserver measurement (matches fill min). */\nconst FILL_FALLBACK_PX = 128;\n\n@Component({\n  tag: 'ds-chart-donut',\n  styleUrl: 'ChartDonut.css',\n  scoped: true,\n})\nexport class ChartDonut {\n  @Prop() locale: string | undefined;\n  @Prop() noDataLabel: string = 'No data';\n  @Element() el!: HTMLElement;\n\n  /** Slices to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /**\n   * Explicit diameter in px. When unset, the donut sizes to its container\n   * (ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and\n   * `* 24` (192px), and stays centered in the leftover space. Prefer unset\n   * inside card layouts.\n   */\n  @Prop() size: number | undefined;\n  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */\n  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;\n  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */\n  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;\n  /** Gap between slices, in degrees. */\n  @Prop() gap: number = 1;\n  /**\n   * Show a chart-owned value callout for genuine pointer or keyboard focus.\n   * Disable when a visible legend already owns persistent label and value detail.\n   */\n  @Prop() showTooltip: boolean = true;\n  /** Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). */\n  @Prop() centerValue: string | undefined;\n  /** Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. */\n  @Prop() centerCaption: string | undefined;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n   * Falls back to this component's own pointer/focus hover when unset.\n   * Slice hover dims peer slices and emits `dsSliceHover` for legend sync. External\n   * highlight never opens the local tooltip.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  @State() private hoveredLabel: string | null = null;\n  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */\n  @State() private displayedValueText: string = '';\n  @State() private displayedCaptionText: string = '';\n  /** Measured fill diameter when `size` is unset. */\n  @State() private measuredSize: number = FILL_FALLBACK_PX;\n  @State() private tooltipX: number = 0;\n  @State() private tooltipY: number = 0;\n\n  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */\n  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;\n\n  private valueTextEl?: SVGTextElement;\n  private captionTextEl?: SVGTextElement;\n  private resizeObserver: ResizeObserver | null = null;\n\n  private get isFillMode(): boolean {\n    return this.size == null || !Number.isFinite(this.size) || this.size <= 0;\n  }\n\n  private get fillMinPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMin, FILL_FALLBACK_PX);\n  }\n\n  private get fillMaxPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMax, 192);\n  }\n\n  /** Clamp available square side into the fill min/max band. */\n  private clampFillSize(availablePx: number): number {\n    const minPx = this.fillMinPx;\n    const maxPx = this.fillMaxPx;\n    if (!(availablePx > 0)) return minPx;\n    return Math.round(Math.min(maxPx, Math.max(minPx, availablePx)));\n  }\n\n  private get resolvedSize(): number {\n    if (!this.isFillMode) return this.size as number;\n    return this.clampFillSize(this.measuredSize);\n  }\n\n  componentDidLoad() {\n    this.syncResizeObserver();\n  }\n\n  @Watch('size')\n  onSizePropChange() {\n    this.syncResizeObserver();\n  }\n\n  disconnectedCallback() {\n    this.teardownResizeObserver();\n  }\n\n  private syncResizeObserver() {\n    this.teardownResizeObserver();\n    if (!this.isFillMode) return;\n    // Observe the host (which fills its parent), not the wrapper — the wrapper\n    // only wraps the SVG and would collapse to the clamped size, locking fill at min.\n    const target = this.el;\n    if (!target || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) return;\n      this.applyAvailableSize(entry.contentRect.width, entry.contentRect.height);\n    });\n    this.resizeObserver.observe(target);\n    this.measureHost();\n  }\n\n  private measureHost() {\n    const rect = this.el.getBoundingClientRect();\n    this.applyAvailableSize(rect.width, rect.height);\n  }\n\n  private applyAvailableSize(width: number, height: number) {\n    const available = Math.floor(Math.min(width, height));\n    if (available > 0 && available !== this.measuredSize) {\n      this.measuredSize = available;\n    }\n  }\n\n  private teardownResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  private handleHover(datum: ChartDatum | null) {\n    this.hoveredLabel = datum?.label ?? null;\n    this.dsSliceHover.emit(datum);\n  }\n\n  private get tooltipDatum(): ChartDatum | null {\n    if (!this.showTooltip || this.hoveredLabel == null) return null;\n    return this.data.find(datum => datum.label === this.hoveredLabel) ?? null;\n  }\n\n  private updateTooltipFromPointer(event: MouseEvent) {\n    if (!this.showTooltip) return;\n    const wrapper = this.el.querySelector<HTMLElement>('.chart-donut__wrapper');\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    this.tooltipX = event.clientX - rect.left;\n    this.tooltipY = event.clientY - rect.top;\n  }\n\n  private updateTooltipFromSvgPoint(\n    path: SVGPathElement,\n    svgX: number,\n    svgY: number,\n    viewBoxSize: number,\n  ) {\n    if (!this.showTooltip) return;\n    const wrapper = this.el.querySelector<HTMLElement>('.chart-donut__wrapper');\n    const svg = path.ownerSVGElement;\n    if (!wrapper || !svg) return;\n    const wrapperRect = wrapper.getBoundingClientRect();\n    const svgRect = svg.getBoundingClientRect();\n    this.tooltipX = svgRect.left - wrapperRect.left + svgX * (svgRect.width / viewBoxSize);\n    this.tooltipY = svgRect.top - wrapperRect.top + svgY * (svgRect.height / viewBoxSize);\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped.\n    if (this.isFillMode && !this.resizeObserver) {\n      this.syncResizeObserver();\n    }\n\n    const size = this.resolvedSize;\n    const radius = size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const innerRadius = radius - thicknessPx;\n    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n    const fullValueText = this.centerValue ?? formatCompactNumber(total, this.locale);\n    if (this.valueTextEl) {\n      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n      else this.valueTextEl.textContent = truncated;\n    }\n\n    const fullCaptionText = this.centerCaption ?? '';\n    if (this.captionTextEl && fullCaptionText) {\n      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n      else this.captionTextEl.textContent = truncated;\n    }\n  }\n\n  render() {\n    const size = this.resolvedSize;\n    const radius = size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n    const innerRadius = radius - thicknessPx;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n    // d3's pie() divides each value by the total to get an angle — with an all-zero total\n    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n    const isEmpty = total <= 0;\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-legend row).\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadiusPx)\n      .padAngle((this.gap * Math.PI) / 180);\n\n    const slices = isEmpty\n      ? []\n      : pie<ChartDatum>()\n          .value(d => d.value)\n          .sort(null)(this.data);\n\n    const emptyRingPath = isEmpty\n      ? arc<{ startAngle: number; endAngle: number }>()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n      : null;\n\n    // Precise vertical centering for the two-line center text, using the real line-height of\n    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n    const fullValueText = this.centerValue ?? formatCompactNumber(total, this.locale);\n    const fullCaptionText = this.centerCaption ?? '';\n    const fill = this.isFillMode;\n\n    return (\n      <Host\n        class={{\n          'chart-donut': true,\n          'chart-donut--fill': fill,\n          'chart-donut--fixed': !fill,\n        }}\n        style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}\n      >\n        <div\n          class=\"chart-donut__wrapper\"\n          style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}\n        >\n          <svg\n            class=\"chart-donut__svg\"\n            viewBox={`0 0 ${size} ${size}`}\n            width={size}\n            height={size}\n            role={isEmpty ? 'img' : undefined}\n            aria-label={isEmpty ? this.noDataLabel : undefined}\n          >\n            <g transform={`translate(${radius}, ${radius})`}>\n              {isEmpty ? (\n                <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-hidden=\"true\" />\n              ) : (\n                slices.map((slice, i) => {\n                  const datum = this.data[i];\n                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n                  const [centroidX, centroidY] = arcGenerator.centroid(slice);\n                  return (\n                    <path\n                      key={datum.label}\n                      class={{ 'chart-donut__slice--dimmed': isDimmed }}\n                      d={arcGenerator(slice) ?? undefined}\n                      fill={datum.color ?? categoryColor(i)}\n                      tabindex={0}\n                      role=\"img\"\n                      aria-label={`${datum.label}: ${datum.value}`}\n                      onMouseEnter={(event: MouseEvent) => {\n                        this.updateTooltipFromPointer(event);\n                        this.handleHover(datum);\n                      }}\n                      onMouseMove={(event: MouseEvent) => this.updateTooltipFromPointer(event)}\n                      onMouseLeave={() => this.handleHover(null)}\n                      onFocus={(event: FocusEvent) => {\n                        this.updateTooltipFromSvgPoint(\n                          event.currentTarget as SVGPathElement,\n                          radius + centroidX,\n                          radius + centroidY,\n                          size,\n                        );\n                        this.handleHover(datum);\n                      }}\n                      onBlur={() => this.handleHover(null)}\n                    />\n                  );\n                })\n              )}\n            </g>\n            <text\n              class=\"chart-donut__center-value\"\n              x={radius}\n              y={centerValueY}\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              ref={el => {\n                this.valueTextEl = (el as SVGTextElement) ?? undefined;\n              }}\n            >\n              {this.displayedValueText || fullValueText}\n            </text>\n            {fullCaptionText && (\n              <text\n                class=\"chart-donut__center-caption\"\n                x={radius}\n                y={centerCaptionY}\n                text-anchor=\"middle\"\n                dominant-baseline=\"central\"\n                ref={el => {\n                  this.captionTextEl = (el as SVGTextElement) ?? undefined;\n                }}\n              >\n                {this.displayedCaptionText || fullCaptionText}\n              </text>\n            )}\n          </svg>\n          {this.tooltipDatum && (\n            <ds-tooltip-data-viz\n              label={this.tooltipDatum.label}\n              value={formatCompactNumber(this.tooltipDatum.value, this.locale)}\n              x={this.tooltipX}\n              y={this.tooltipY}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/mcp-data/registry/chart-line.json

@@ -1,223 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chart-line",
-  "title": "ChartLine",
-  "description": "Static single- or multi-series line chart for trends across ordered, evenly spaced categories, including preformatted time-period labels.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chart-line",
-    "source": "src/wc/components/ChartLine/ChartLine.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Static single- or multi-series line chart for trends across ordered, evenly spaced categories, including preformatted time-period labels.",
-      "useWhen": [
-        "Users need to follow one or more numeric trends across a shared ordered x-axis.",
-        "Time periods are already grouped into equally spaced labels such as months, weeks, or days.",
-        "A horizontal ChartLegend should identify multiple series."
-      ],
-      "avoidWhen": [
-        "Pixel position must reflect irregular elapsed time or continuous timestamps.",
-        "The primary task is comparing unrelated category magnitudes rather than following a trend.",
-        "The chart needs built-in zoom, brushing, selection, or drill-down.",
-        "Series lengths do not align with the shared category list."
-      ],
-      "alternatives": [
-        {
-          "when": "Users need to compare one measure across discrete categories or time buckets.",
-          "component": "component:ds-chart-bar",
-          "reason": "Bars emphasize independent bucket magnitudes."
-        },
-        {
-          "when": "The data communicates parts of a total.",
-          "component": "component:ds-chart-donut",
-          "reason": "Donut provides the part-to-whole and center-summary treatment."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-chart-legend",
-        "component:ds-card-data-viz",
-        "component:ds-tooltip-data-viz"
-      ],
-      "accessibility": [
-        "Provide a visible legend or adjacent textual summary when exact series values are important; the chart image name alone is not a complete data table.",
-        "Do not rely on series color alone to communicate meaning.",
-        "A future point tooltip must supplement rather than replace accessible series and value context."
-      ],
-      "states": [
-        "The chart is currently static and does not own hover, selection, loading, or empty-state policy.",
-        "Its standard horizontal legend is a static key with local hover highlighting disabled.",
-        "Point markers may be shown or hidden without changing the underlying series meaning.",
-        "Authored series colors override the shared categorical palette."
-      ],
-      "responsiveBehavior": [
-        "Width and height provide the standalone intrinsic viewport; constrained card regions are measured and reflow both axes to their rendered pixel dimensions.",
-        "Responsive layout changes point positions and plot extents without scaling SVG text, line strokes, point markers, or margins.",
-        "Category positions are always equally spaced, even when labels represent time.",
-        "Reduce or pre-format dense labels before passing them; the chart renders authored labels without a continuous time scale."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign series and categories as JavaScript properties and keep every series aligned to the category count."
-        ],
-        "react": [
-          "Pass stable series and category arrays; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ],
-        "angular": [
-          "Bind series and categories as properties; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/ChartLine/ChartLine.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "categories": {
-          "type": "string[]",
-          "resolvedType": "string[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "X-axis labels — must match each series' `data` length. Set as a JS property."
-        },
-        "height": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "height",
-          "default": "240",
-          "required": false,
-          "mutable": false,
-          "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
-        },
-        "series": {
-          "type": "ChartSeries[]",
-          "resolvedType": "ChartSeries[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "One or more series to plot. Set as a JS property (not an HTML attribute)."
-        },
-        "showPoints": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "show-points",
-          "default": "true",
-          "required": false,
-          "mutable": false
-        },
-        "width": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "width",
-          "default": "480",
-          "required": false,
-          "mutable": false,
-          "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
-        }
-      },
-      "events": [],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "categories": {
-        "type": "string[]",
-        "resolvedType": "string[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "X-axis labels — must match each series' `data` length. Set as a JS property."
-      },
-      "height": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "height",
-        "default": "240",
-        "required": false,
-        "mutable": false,
-        "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
-      },
-      "series": {
-        "type": "ChartSeries[]",
-        "resolvedType": "ChartSeries[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "One or more series to plot. Set as a JS property (not an HTML attribute)."
-      },
-      "showPoints": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "show-points",
-        "default": "true",
-        "required": false,
-        "mutable": false
-      },
-      "width": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "width",
-        "default": "480",
-        "required": false,
-        "mutable": false,
-        "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
-      }
-    },
-    "events": [],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-chart-line",
-      "react": "DsChartLine",
-      "angular": "DsChartLine"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-chart-line.js';",
-        "example": "<ds-chart-line></ds-chart-line>"
-      },
-      "react": {
-        "import": "import { DsChartLine } from '@ds-mo/ui/react';",
-        "example": "<DsChartLine />"
-      },
-      "angular": {
-        "import": "import { DsChartLine } from '@ds-mo/ui/angular/ds-chart-line';",
-        "example": "<ds-chart-line></ds-chart-line>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: categories, series.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.1.1",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "path": "src/wc/components/ChartLine/ChartLine.css",
-      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-line__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-line__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-line__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-line__path {\n  fill: none;\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n.chart-line__point {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-018);\n  r: calc(var(--dimension-size-075) / 2);\n  vector-effect: non-scaling-stroke;\n}\n\n@media (forced-colors: active) {\n  .chart-line__path,\n  .chart-line__point {\n    forced-color-adjust: none;\n  }\n\n  .chart-line__point {\n    stroke: var(--ds-forced-color-surface);\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/ChartLine/ChartLine.tsx",
-      "content": "import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { line as lineShape } from 'd3-shape';\nimport { scaleLinear, scalePoint } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartSeries } from '../../utils/chart-types';\n\n@Component({\n  tag: 'ds-chart-line',\n  styleUrl: 'ChartLine.css',\n  scoped: true,\n})\nexport class ChartLine {\n  /** One or more series to plot. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n  @Prop() showPoints: boolean = true;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n\n    const allValues = this.series.flatMap(s => s.data);\n    const yMax = max(allValues) ?? 0;\n\n    const xScale = scalePoint<number>()\n      .domain(this.categories.map((_, i) => i))\n      .range([0, innerWidth]);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const lineGenerator = lineShape<number>()\n      .x((_, i) => xScale(i) ?? 0)\n      .y(d => yScale(d));\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-line\">\n        <svg\n          class=\"chart-line__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={this.series.map(s => s.name).join(', ')}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-line__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-line__axis-label\"\n                  x={-axisLabelGap}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((label, i) => (\n              <text\n                key={`x-${label}`}\n                class=\"chart-line__axis-label\"\n                x={xScale(i) ?? 0}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {label}\n              </text>\n            ))}\n\n            {this.series.map((s, si) => {\n              const color = s.color ?? categoryColor(si);\n              return (\n                <g key={s.name}>\n                  <path class=\"chart-line__path\" d={lineGenerator(s.data) ?? undefined} stroke={color} />\n                  {this.showPoints &&\n                    s.data.map((d, i) => (\n                      <circle\n                        key={`${s.name}-${i}`}\n                        class=\"chart-line__point\"\n                        cx={xScale(i) ?? 0}\n                        cy={yScale(d)}\n                        fill={color}\n                      />\n                    ))}\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}