@astryxdesign/lab 0.7.5-canary.fccd771 → 0.7.6-canary.bb18c81

package/README.md

@@ -12,7 +12,7 @@ Components in lab:
 - Compose with `@astryxdesign/core` components (use the theme, follow naming conventions)
 - Graduate to `@astryxdesign/core` after thorough engineering review
 
-See the **[Component Lifecycle](https://github.com/facebook/astryx/wiki/Component-Lifecycle)** wiki for how a component moves from lab → core (and the promotion gates), and the **[Component Hardening Protocol](https://github.com/facebook/astryx/wiki/Component-Hardening-Protocol)** for the bar a component must clear to graduate.
+See the **[Component Lifecycle](https://github.com/meta/astryx/wiki/Component-Lifecycle)** wiki for how a component moves from lab → core (and the promotion gates), and the **[Component Hardening Protocol](https://github.com/meta/astryx/wiki/Component-Hardening-Protocol)** for the bar a component must clear to graduate.
 
 ## What's here vs what's in core
 
@@ -22,7 +22,7 @@ See the **[Component Lifecycle](https://github.com/facebook/astryx/wiki/Componen
 
 ## Promotion gate: accessibility
 
-The [Accessibility Checklist](https://github.com/facebook/astryx/wiki/Accessibility-Checklist) is a hard requirement for graduating to core — every item, verified in the promotion PR, alongside the hardening bar linked above.
+The [Accessibility Checklist](https://github.com/meta/astryx/wiki/Accessibility-Checklist) is a hard requirement for graduating to core — every item, verified in the promotion PR, alongside the hardening bar linked above.
 
 Lab components get the same scan coverage as core (the `pr-a11y` axe audit and the weekly full scan run against lab too), but a11y findings on a lab component do not block lab merges — they block **promotion**. Iterate freely in lab; clear the checklist to graduate.
 

package/astryx.integration.mjs

@@ -7,5 +7,5 @@
 export default {
   components: './src',
   templates: './blocks',
-  issuesUrl: 'https://github.com/facebook/astryx/issues',
+  issuesUrl: 'https://github.com/meta/astryx/issues',
 };

package/blocks/CommentPinShowcase.doc.mjs

@@ -6,7 +6,7 @@ export default {
   name: 'Avatar-first annotations',
   displayName: 'Avatar-first annotations',
   description:
-    'Caller-positioned comment pins over media and in a content margin. Every coordinate maps to the pin’s logical bottom-start corner. The selected group caps its participants at three circles (two Avatars plus +3) and shows its unread count in an accent badge instead of the total; the unread margin pin shows the badge too. Other pins dim without becoming disabled, activating the selected pin again clears the selection, and no pin dims while nothing is selected.',
+    'Caller-positioned comment pins over media and in a content margin. Every coordinate maps to the pin’s logical bottom-start corner. The selected group caps its participants at three circles (two Avatars plus an ellipsis) and ends with its total and an accent unread dot; the unread margin pin shows the dot too. Other pins dim without becoming disabled, activating the selected pin again clears the selection, and no pin dims while nothing is selected.',
   exampleFor: 'CommentPin',
   isReady: true,
   isShowcase: true,

package/blocks/CommentPinShowcase.tsx

@@ -7,7 +7,7 @@
  *   participant/thread/unread counts, and controlled selected/dimmed state
  *   that may be empty
  * @output A grouped pin with a three-circle participant cap and an unread
- *   badge, a resolved pin, and an unread margin pin; activating the selected
+ *   dot, a single pin, and an unread margin pin; activating the selected
  *   pin clears the selection, and non-selected pins dim only while another pin
  *   is selected
  * @position CommentPin docsite showcase and copyable Lab block
@@ -160,9 +160,8 @@ export default function CommentPinShowcase() {
             xstyle={styles.groupedMarker}
           />
           <CommentPin
-            label="Open resolved annotation from Mira"
+            label="Open annotation from Mira"
             participants={[PEOPLE.mira]}
-            isResolved
             isSelected={selected === 'resolved'}
             isDimmed={selected != null && selected !== 'resolved'}
             onClick={() => toggle('resolved')}

package/dist/Chat/ChatUnreadDivider.js

@@ -74,7 +74,7 @@ export function ChatUnreadDivider({
       }
     }), /*#__PURE__*/_jsx("span", {
       ...{
-        className: "x2lah0s x9ynric x141an7d x1lvx875 xjt36v0 x1ltkj2j"
+        className: "x2lah0s x9ynric x141an7d x1lvx875 x1wj83wy x1ltkj2j"
       },
       children: label
     })]

package/dist/CircularProgress/CircularProgress.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file CircularProgress.tsx
- * @input Uses React, useId, stylex, SVG, color/spacing/duration/ease tokens
+ * @input Uses React (useId, refs, layout effects), stylex, SVG, Web
+ *   Animations, color/spacing/duration/ease tokens
  * @output Exports CircularProgress component, CircularProgressProps, CircularProgressSize, CircularProgressVariant types
  * @position Core implementation; consumed by index.ts
  *

package/dist/CircularProgress/CircularProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../src/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAY5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAQtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuKD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAoB,EACpB,aAAqB,EACrB,gBAA0C,EAC1C,QAAQ,EACR,IAAW,EACX,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAuHvB;yBAzIe,gBAAgB"}
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../src/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAWtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmWD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAoB,EACpB,aAAqB,EACrB,gBAA0C,EAC1C,QAAQ,EACR,IAAW,EACX,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,qBAAqB,+BA+QvB;yBAjSe,gBAAgB"}

package/dist/CircularProgress/CircularProgress.js

@@ -4,7 +4,8 @@
 
 /**
  * @file CircularProgress.tsx
- * @input Uses React, useId, stylex, SVG, color/spacing/duration/ease tokens
+ * @input Uses React (useId, refs, layout effects), stylex, SVG, Web
+ *   Animations, color/spacing/duration/ease tokens
  * @output Exports CircularProgress component, CircularProgressProps, CircularProgressSize, CircularProgressVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -14,7 +15,7 @@
  * - /packages/lab/src/CircularProgress/index.ts (exports if types change)
  * - /apps/storybook/stories/CircularProgress.stories.tsx (storybook stories)
  */
-import { useId } from 'react';
+import { useId, useLayoutEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, durationVars, easeVars, fontWeightVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -35,6 +36,8 @@ import { themeProps } from '@astryxdesign/core/utils';
  * ```
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** How far a turning layer's drawing reaches past the ring's box, in px. */
+const FILL_BLEED = 2;
 const SIZE_CONFIG = {
   sm: {
     diameter: 32,
@@ -83,9 +86,11 @@ const styles = {
     $$css: true
   },
   fill: {
-    kDwRjp: "xbh8q5q",
-    kU5bRw: "x1owpc8m",
-    k1ekBW: "xxnu56j",
+    kVAEAm: "x10l6tqk",
+    kpwlN0: "x10a8y8t",
+    kVQacm: "xb3r6kr",
+    kfzvcC: "x47corl",
+    k1ekBW: "x13b0p5u",
     kIyJzY: "x80gvsz",
     kAMwcw: "xlr8y92",
     $$css: true
@@ -106,15 +111,15 @@ const variantStyles = {
     $$css: true
   },
   success: {
-    kjVXCG: "x8y33gb",
+    kjVXCG: "x88o7k4",
     $$css: true
   },
   warning: {
-    kjVXCG: "x9ezeq1",
+    kjVXCG: "x16d96h5",
     $$css: true
   },
   error: {
-    kjVXCG: "x1vco6zm",
+    kjVXCG: "xqb94c9",
     $$css: true
   },
   neutral: {
@@ -153,6 +158,129 @@ function defaultFormatValueLabel(value, max) {
   return `${pct}%`;
 }
 
+/**
+ * Each half-ring's turn and the leading cap's for a filled share `p` (0–1),
+ * and which parts show. A half-ring parked at the edge of its half (the right
+ * one at 0, the left one until the value passes half) is hidden, so its
+ * antialiased end never leaves a hairline at 6 o'clock.
+ */
+function fillTurns(p) {
+  const turn = 360 * p;
+  return {
+    right: Math.min(Math.max(turn, 0), 180),
+    left: Math.min(Math.max(turn, 180), 360),
+    cap: turn,
+    rightShown: p > 0 ? 1 : 0,
+    leftShown: p > 0.5 ? 1 : 0,
+    caps: p > 0 ? 1 : 0
+  };
+}
+
+/** A CSS time (`410ms`, `0.41s`, or a list's first entry) in milliseconds. */
+function parseTime(value) {
+  const first = value.split(',')[0]?.trim() ?? '';
+  const amount = Number.parseFloat(first);
+  if (!Number.isFinite(amount)) {
+    return 0;
+  }
+  return first.endsWith('ms') ? amount : amount * 1000;
+}
+
+/**
+ * The theme's easing as a function of time (0–1), evaluated by the browser
+ * itself through a detached animation, so any CSS easing works. It runs only
+ * where Web Animations exists (its caller returns first otherwise), on the
+ * fill's computed `transition-timing-function`: one easing, which a browser
+ * always reports as valid CSS.
+ */
+function easingOf(easing) {
+  const effect = new KeyframeEffect(null, null, {
+    duration: 1000,
+    easing,
+    fill: 'both'
+  });
+  const probe = new Animation(effect);
+  return t => {
+    probe.currentTime = t * 1000;
+    return effect.getComputedTiming().progress ?? t;
+  };
+}
+
+/**
+ * Keyframes for a change from `from` to `to` (filled shares), sampled once a
+ * frame on the theme's easing, with an extra sample exactly where the arc
+ * crosses 12 or 6 o'clock so each half stops and starts on time.
+ */
+function fillKeyframes(from, to, duration, ease) {
+  const count = Math.max(8, Math.ceil(duration / (1000 / 60)));
+  const grid = Array.from({
+    length: count + 1
+  }, (_, i) => i / count);
+  const at = t => from + (to - from) * ease(t);
+  // Where the eased path passes half (p = 0.5): a sample there, and one just
+  // after it, so the halves hand over on time and the left half's
+  // visibility steps rather than fades.
+  const crossings = [];
+  for (let i = 0; i < count; i++) {
+    const a = grid[i];
+    const b = grid[i + 1];
+    const fa = at(a) - 0.5;
+    const fb = at(b) - 0.5;
+    if (fa === 0) {
+      crossings.push(a);
+    } else if (fa * fb < 0) {
+      let low = a;
+      let high = b;
+      for (let k = 0; k < 24; k++) {
+        const mid = (low + high) / 2;
+        if ((at(low) - 0.5) * (at(mid) - 0.5) <= 0) {
+          high = mid;
+        } else {
+          low = mid;
+        }
+      }
+      crossings.push((low + high) / 2);
+    }
+  }
+  const times = [...new Set([...grid, ...crossings, ...crossings.map(c => c + 1e-4).filter(t => t < 1)])].sort((x, y) => x - y);
+  const frames = times.map(t => ({
+    t,
+    ...fillTurns(t === 1 ? to : at(t))
+  }));
+  // The sample at a crossing sits exactly on half, where the left half reads
+  // as hidden. Give it the side the arc is leaving instead, so the left half
+  // steps at once both ways: shrinking through half, it used to fade out
+  // from the sample before, while it still drew part of the arc (a lighter
+  // band between the end cap and 6 o'clock for a frame).
+  const onHalf = new Set(crossings);
+  for (let i = 1; i < frames.length; i += 1) {
+    if (onHalf.has(frames[i].t) || frames[i].t === 1 && to === 0.5) {
+      frames[i].leftShown = frames[i - 1].leftShown;
+    }
+  }
+  return {
+    right: frames.map(f => ({
+      offset: f.t,
+      transform: `rotate(${f.right}deg)`,
+      opacity: f.rightShown
+    })),
+    left: frames.map(f => ({
+      offset: f.t,
+      transform: `rotate(${f.left}deg)`,
+      opacity: f.leftShown
+    })),
+    cap: frames.map(f => ({
+      offset: f.t,
+      transform: `rotate(${f.cap}deg)`,
+      opacity: f.caps
+    })),
+    start: frames.map(f => ({
+      offset: f.t,
+      opacity: f.caps
+    }))
+  };
+}
+
 /**
  * A circular/radial progress indicator that shows completion as a ring.
  *
@@ -205,7 +333,6 @@ export function CircularProgress({
   const safeMax = Number.isFinite(max) ? max : 0;
   const clampedValue = Math.min(Math.max(0, safeValue), safeMax);
   const percentage = safeMax > 0 ? clampedValue / safeMax : 0;
-  const dashoffset = circumference * (1 - percentage);
   const valueText = formatValueLabel(clampedValue, safeMax);
   const center = diameter / 2;
   const showLabel = !isLabelHidden;
@@ -213,6 +340,89 @@ export function CircularProgress({
   const centerContent = children != null ? children : showValueLabel ? valueText : null;
   const fillVariant = isDisabled ? 'disabled' : variant;
   const trackVariant = isDisabled ? 'neutral' : variant;
+
+  // A value change turns the fill's layers with Web Animations on the
+  // compositor, from wherever the arc is drawn now (mid-change, the running
+  // change's own curve says where) to the new value, on the theme's
+  // duration and easing. What renders is always the resting state, so a
+  // first render, a render without script, or a skipped animation shows the
+  // value.
+  const fillRef = useRef(null);
+  const rightRef = useRef(null);
+  const leftRef = useRef(null);
+  const capRef = useRef(null);
+  const startRef = useRef(null);
+  // Where the arc is drawn: the value at rest, or, when a change is
+  // interrupted, the point its own curve has reached. A change's cleanup
+  // records it and releases the change's animations (react-component-runtime
+  // INV3), so the next change starts from there and an unmount or a switch to
+  // indeterminate leaves nothing running. While indeterminate no value is
+  // drawn (null): the ring draws its own arc, not the value it holds, so the
+  // next value draws at once instead of sweeping from that held value.
+  const drawn = useRef(percentage);
+  useLayoutEffect(() => {
+    const from = drawn.current;
+    if (isIndeterminate) {
+      drawn.current = null;
+      return;
+    }
+    if (from === null || from === percentage) {
+      drawn.current = percentage;
+      return;
+    }
+    const fill = fillRef.current;
+    const layers = [rightRef.current, leftRef.current, capRef.current, startRef.current];
+    drawn.current = percentage;
+    if (fill == null || layers.some(layer => typeof layer?.animate !== 'function')) {
+      return;
+    }
+    const style = getComputedStyle(fill);
+    const duration = parseTime(style.transitionDuration);
+    if (duration <= 0) {
+      return;
+    }
+    const ease = easingOf(style.transitionTimingFunction);
+    const frames = fillKeyframes(from, percentage, duration, ease);
+    const timing = {
+      duration,
+      easing: 'linear',
+      fill: 'backwards'
+    };
+    const [right, left, cap, start] = layers;
+    const animations = [right.animate(frames.right, timing), left.animate(frames.left, timing), cap.animate(frames.cap, timing), start.animate(frames.start, timing)];
+    return () => {
+      const [first] = animations;
+      const progress = first.playState !== 'finished' ? Number(first.effect?.getComputedTiming().progress ?? 1) : 1;
+      // `progress` is the change's linear time fraction; the arc is drawn on
+      // its easing, so the eased position is where it is.
+      drawn.current = from + (percentage - from) * ease(progress);
+      for (const animation of animations) {
+        animation.cancel();
+      }
+    };
+  }, [percentage, isIndeterminate]);
+  const turns = fillTurns(percentage);
+  // One half of the ring's stroke, from 6 o'clock clockwise to 12 (the left
+  // half) before its layer turns; butt ends, the caps are drawn apart.
+  const bleedBox = `${-FILL_BLEED} ${-FILL_BLEED} ${diameter + 2 * FILL_BLEED} ${diameter + 2 * FILL_BLEED}`;
+  const halfRing = /*#__PURE__*/_jsx("svg", {
+    width: diameter + 2 * FILL_BLEED,
+    height: diameter + 2 * FILL_BLEED,
+    viewBox: bleedBox,
+    ...{
+      className: "x1lliihq xbh8q5q xy6n8ys"
+    },
+    children: /*#__PURE__*/_jsx("circle", {
+      cx: center,
+      cy: center,
+      r: radius,
+      strokeWidth: strokeWidth,
+      strokeDasharray: `${circumference / 2} ${circumference}`,
+      transform: `rotate(90 ${center} ${center})`
+    })
+  });
+  // A round cap at 12 o'clock on the ring's centerline (a zero-length stroke).
+  const capPath = `M ${center} ${strokeWidth / 2} h 0`;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...mergeProps(themeProps('circular-progress', {
@@ -274,16 +484,83 @@ export function CircularProgress({
           cy: center,
           r: radius,
           strokeWidth: strokeWidth
-        }) : /*#__PURE__*/_jsx("circle", {
-          ...mergeProps(themeProps('circular-progress-fill', {
-            variant: fillVariant
-          }), stylex.props(styles.fill, variantStyles[fillVariant])),
-          cx: center,
-          cy: center,
-          r: radius,
-          strokeWidth: strokeWidth,
-          strokeDasharray: circumference,
-          strokeDashoffset: dashoffset
+        }) : null]
+      }), isIndeterminate ? null :
+      /*#__PURE__*/
+      // The determinate fill (see `styles.fill`). Its stroke color is
+      // set on the theming target and inherited by every part.
+      _jsxs("span", {
+        ref: fillRef,
+        "aria-hidden": "true",
+        ...mergeProps(themeProps('circular-progress-fill', {
+          variant: fillVariant
+        }), stylex.props(styles.fill, variantStyles[fillVariant])),
+        children: [/*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x10l6tqk x13vifvy x3hqpx7 x5yr21d xb3r6kr x1nrll8i"
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            ref: rightRef,
+            ...{
+              className: "x10l6tqk x13vifvy x75ztot x5yr21d x1q1rmc8 xb5nubl"
+            },
+            style: {
+              transform: `rotate(${turns.right}deg)`,
+              opacity: turns.rightShown
+            },
+            children: halfRing
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x10l6tqk x13vifvy x3hqpx7 x5yr21d xb3r6kr xu96u03"
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            ref: leftRef,
+            ...{
+              className: "x10l6tqk x13vifvy x75ztot x5yr21d x1q1rmc8 xu96u03"
+            },
+            style: {
+              transform: `rotate(${turns.left}deg)`,
+              opacity: turns.leftShown
+            },
+            children: halfRing
+          })
+        }), /*#__PURE__*/_jsx("svg", {
+          width: diameter,
+          height: diameter,
+          viewBox: `0 0 ${diameter} ${diameter}`,
+          ...{
+            className: "x10l6tqk x10a8y8t x1q1rmc8 x1lliihq xbh8q5q x1owpc8m"
+          },
+          children: /*#__PURE__*/_jsx("path", {
+            ref: startRef,
+            d: capPath,
+            strokeWidth: strokeWidth,
+            style: {
+              opacity: turns.caps
+            }
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          ref: capRef,
+          ...{
+            className: "x10l6tqk x10a8y8t x1q1rmc8"
+          },
+          style: {
+            transform: `rotate(${turns.cap}deg)`,
+            opacity: turns.caps
+          },
+          children: /*#__PURE__*/_jsx("svg", {
+            width: diameter + 2 * FILL_BLEED,
+            height: diameter + 2 * FILL_BLEED,
+            viewBox: bleedBox,
+            ...{
+              className: "x1owpc8m x1lliihq xbh8q5q xy6n8ys"
+            },
+            children: /*#__PURE__*/_jsx("path", {
+              d: capPath,
+              strokeWidth: strokeWidth
+            })
+          })
         })]
       }), centerContent != null && /*#__PURE__*/_jsx("div", {
         ...{

package/dist/CommentPin/CommentPin.d.ts

@@ -1,4 +1,6 @@
 import type { BaseProps } from '@astryxdesign/core';
+/** Pin heights on the shared element-size scale: 28, 32, or 36px. */
+export type CommentPinSize = 'sm' | 'md' | 'lg';
 /** Identity data for one representative shown inside a CommentPin. */
 export interface CommentPinParticipant {
     /** Stable identity used to remove duplicate representatives. */
@@ -21,10 +23,17 @@ export interface CommentPinProps extends Omit<BaseProps<HTMLButtonElement>, 'chi
      * Ordered participants, lead first. A single marker shows the first. A
      * grouped marker shows distinct IDs as an AvatarGroup of at most three
      * circles: every participant when three or fewer are distinct, otherwise the
-     * first two plus a `+N` overflow circle. Pass every distinct participant so
-     * the overflow count is accurate.
+     * first two plus an ellipsis overflow circle. Pass every distinct
+     * participant so the overflow appears only when more than three people
+     * participate.
      */
     participants: readonly [CommentPinParticipant, ...CommentPinParticipant[]];
+    /**
+     * Pin height on the element-size scale: `sm` 28px, `md` 32px, `lg` 36px,
+     * with 22px, 24px, and 28px participant circles.
+     * @default 'sm'
+     */
+    size?: CommentPinSize;
     /**
      * Total number of threads represented by this marker. Values above one use
      * the grouped presentation and show the exact total.
@@ -33,8 +42,9 @@ export interface CommentPinProps extends Omit<BaseProps<HTMLButtonElement>, 'chi
     threadCount?: number;
     /**
      * Number of represented threads with unread activity. When above zero, an
-     * accent badge shows this number in place of the thread total, on single
-     * and grouped pins alike. Values above `threadCount` are capped.
+     * accent status dot appears at the end of the pin: after the thread total,
+     * or after the participant on a single pin. Values above `threadCount` are
+     * capped.
      * @default 0
      */
     unreadCount?: number;
@@ -45,7 +55,11 @@ export interface CommentPinProps extends Omit<BaseProps<HTMLButtonElement>, 'chi
      * disabling it, so it remains available to switch selection.
      */
     isDimmed?: boolean;
-    /** Whether every thread represented by this pin is resolved. */
+    /**
+     * Whether every thread represented by this pin is resolved. A resolved pin
+     * renders nothing unless it is selected, so resolved discussion leaves the
+     * content while a thread the reader opened keeps its anchor.
+     */
     isResolved?: boolean;
     /** Whether activation is unavailable. */
     isDisabled?: boolean;
@@ -56,7 +70,8 @@ export interface CommentPinProps extends Omit<BaseProps<HTMLButtonElement>, 'chi
  * The caller owns grouping, representative selection, coordinates, collision
  * handling, and the content opened by activation. Absolute placement maps the
  * host anchor to the pin's logical bottom-start corner. The pin only owns its
- * compact button surface and controlled visual states.
+ * compact button surface and controlled visual states. `size` sets its height
+ * on the element-size scale.
  *
  * @example
  * ```
@@ -79,7 +94,7 @@ export interface CommentPinProps extends Omit<BaseProps<HTMLButtonElement>, 'chi
  * />
  * ```
  */
-export declare function CommentPin({ label, participants, threadCount, unreadCount, isSelected, isDimmed, isResolved, isDisabled, ref, xstyle, className, style, ...rest }: CommentPinProps): React.ReactNode;
+export declare function CommentPin({ label, participants, size, threadCount, unreadCount, isSelected, isDimmed, isResolved, isDisabled, ref, xstyle, className, style, ...rest }: CommentPinProps): React.ReactNode;
 export declare namespace CommentPin {
     var displayName: string;
 }

package/dist/CommentPin/CommentPin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentPin.d.ts","sourceRoot":"","sources":["../../src/CommentPin/CommentPin.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA2BlD,sEAAsE;AACtE,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,iBAAiB,CAAC,EAC5B,UAAU,CACX;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,YAAY,EAAE,SAAS,CAAC,qBAAqB,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;IAC3E;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAqMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,WAAe,EACf,WAAe,EACf,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAClB,UAAkB,EAClB,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,SAAS,CAyInC;yBAvJe,UAAU"}
+{"version":3,"file":"CommentPin.d.ts","sourceRoot":"","sources":["../../src/CommentPin/CommentPin.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA4BlD,qEAAqE;AACrE,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,sEAAsE;AACtE,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,iBAAiB,CAAC,EAC5B,UAAU,CACX;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,YAAY,EAAE,SAAS,CAAC,qBAAqB,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;IAC3E;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA8ND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,IAAW,EACX,WAAe,EACf,WAAe,EACf,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAClB,UAAkB,EAClB,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,SAAS,CA4JnC;yBA3Ke,UAAU"}