@astryxdesign/lab 0.7.4-canary.faa934f → 0.7.5-canary.04434e7

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/Chart/Chart.d.ts

@@ -11,7 +11,7 @@
  * hidden data table so screen reader users can read the underlying values.
  */
 import { type ReactNode } from 'react';
-import type { ChartMargin } from './types';
+import type { ChartMargin } from './types.js';
 /**
  * Controls how the y-axis domain is computed:
  * - `'auto'` — includes 0 when all values are positive (default, bar-friendly)

package/dist/Chart/ChartContext.d.ts

@@ -1,4 +1,4 @@
-import type { ChartContext } from './types';
+import type { ChartContext } from './types.js';
 export declare const ChartProvider: import("react").Provider<ChartContext | null>;
 /** Access the chart context. Throws if used outside <Chart>. */
 export declare function useChart(): ChartContext;

package/dist/Chart/index.d.ts

@@ -1,29 +1,29 @@
-export { Chart, type ChartProps, type YBaseline } from './Chart';
-export { ChartAxis, type ChartAxisProps } from './ChartAxis';
-export { compactNumber, currency, percent, shortDate, monthYear, } from './formatters';
-export { ChartGrid, type ChartGridProps } from './ChartGrid';
-export { ChartBar, type ChartBarProps } from './ChartBar';
-export { ChartLine, type ChartLineProps } from './ChartLine';
-export { ChartArea, type ChartAreaProps } from './ChartArea';
-export { ChartErrorBar, type ChartErrorBarProps } from './ChartErrorBar';
-export { ChartCandlestick, type ChartCandlestickProps, } from './ChartCandlestick';
-export { ChartDot, type ChartDotProps } from './ChartDot';
-export { ChartDotGL, type ChartDotGLProps } from './ChartDotGL';
-export { ChartDotGLInteractive, type ChartDotGLInteractiveProps, } from './ChartDotGLInteractive';
-export { ChartHeatmapGL, type ChartHeatmapGLProps, } from './ChartHeatmapGL';
-export { ChartStreamGL, type ChartStreamGLProps, type ChartStreamGLHandle, } from './ChartStreamGL';
-export { ChartTooltip, type ChartTooltipProps, type ChartCrosshairMode, } from './ChartTooltip';
-export { ChartLegend, type ChartLegendProps, type ChartLegendItem, } from './ChartLegend';
-export { useChart } from './ChartContext';
-export type { ChartContext, ChartMargin, ChartScale, DataPoint } from './types';
-export { m4Reduce, type M4Point } from './m4';
-export { isBandScale, xPixel } from './utils';
-export { useChartColors } from './useChartColors';
-export { getChartColors, getChartColorsFromResolver, type ChartColorsAPI, type SequentialHue, type TokenResolver, } from './getChartColors';
-export { useChartRange, type UseChartRangeOptions, type UseChartRangeReturn, } from './useChartRange';
-export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader, CIRCLE_FRAG_BODY, POINT_SIZE_COMPENSATION, } from './webgl';
-export { ChartBrush, type ChartBrushProps, type BrushMode, type BrushRange, } from './ChartBrush';
-export { ChartZoom, type ChartZoomProps, type ZoomToolbarPosition, } from './ChartZoom';
-export { ChartSelect, type ChartSelectProps } from './ChartSelect';
-export { ChartReferenceLine, type ChartReferenceLineProps, } from './ChartReferenceLine';
+export { Chart, type ChartProps, type YBaseline } from './Chart.js';
+export { ChartAxis, type ChartAxisProps } from './ChartAxis.js';
+export { compactNumber, currency, percent, shortDate, monthYear, } from './formatters.js';
+export { ChartGrid, type ChartGridProps } from './ChartGrid.js';
+export { ChartBar, type ChartBarProps } from './ChartBar.js';
+export { ChartLine, type ChartLineProps } from './ChartLine.js';
+export { ChartArea, type ChartAreaProps } from './ChartArea.js';
+export { ChartErrorBar, type ChartErrorBarProps } from './ChartErrorBar.js';
+export { ChartCandlestick, type ChartCandlestickProps, } from './ChartCandlestick.js';
+export { ChartDot, type ChartDotProps } from './ChartDot.js';
+export { ChartDotGL, type ChartDotGLProps } from './ChartDotGL.js';
+export { ChartDotGLInteractive, type ChartDotGLInteractiveProps, } from './ChartDotGLInteractive.js';
+export { ChartHeatmapGL, type ChartHeatmapGLProps, } from './ChartHeatmapGL.js';
+export { ChartStreamGL, type ChartStreamGLProps, type ChartStreamGLHandle, } from './ChartStreamGL.js';
+export { ChartTooltip, type ChartTooltipProps, type ChartCrosshairMode, } from './ChartTooltip.js';
+export { ChartLegend, type ChartLegendProps, type ChartLegendItem, } from './ChartLegend.js';
+export { useChart } from './ChartContext.js';
+export type { ChartContext, ChartMargin, ChartScale, DataPoint } from './types.js';
+export { m4Reduce, type M4Point } from './m4.js';
+export { isBandScale, xPixel } from './utils.js';
+export { useChartColors } from './useChartColors.js';
+export { getChartColors, getChartColorsFromResolver, type ChartColorsAPI, type SequentialHue, type TokenResolver, } from './getChartColors.js';
+export { useChartRange, type UseChartRangeOptions, type UseChartRangeReturn, } from './useChartRange.js';
+export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader, CIRCLE_FRAG_BODY, POINT_SIZE_COMPENSATION, } from './webgl.js';
+export { ChartBrush, type ChartBrushProps, type BrushMode, type BrushRange, } from './ChartBrush.js';
+export { ChartZoom, type ChartZoomProps, type ZoomToolbarPosition, } from './ChartZoom.js';
+export { ChartSelect, type ChartSelectProps } from './ChartSelect.js';
+export { ChartReferenceLine, type ChartReferenceLineProps, } from './ChartReferenceLine.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Chart/useChartColors.d.ts

@@ -1,4 +1,4 @@
-import type { ChartColorsAPI } from './getChartColors';
+import type { ChartColorsAPI } from './getChartColors.js';
 /**
  * Theme-aware chart colors. Resolves data-viz tokens from the current
  * theme context — respects light/dark mode and custom themes.

package/dist/Chart/useChartRange.d.ts

@@ -1,4 +1,4 @@
-import type { ChartStreamGLHandle } from './ChartStreamGL';
+import type { ChartStreamGLHandle } from './ChartStreamGL.js';
 export interface UseChartRangeOptions {
     /** Sliding window size for x-axis (number of ticks visible). Required. */
     xWindow: number;

package/dist/Chart/utils.d.ts

@@ -4,7 +4,7 @@
  * @position Internal helpers; consumed by mark, axis, and interaction components
  */
 import type { ScaleBand } from 'd3-scale';
-import type { ChartScale } from './types';
+import type { ChartScale } from './types.js';
 /** Type guard for d3 band scales */
 export declare function isBandScale(scale: ChartScale): scale is ScaleBand<string>;
 /**

package/dist/Chat/ChatReactionBar.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '@astryxdesign/core';
-import type { ChatEmojiOption } from './ChatEmojiPicker';
+import type { ChatEmojiOption } from './ChatEmojiPicker.js';
 export interface ChatReaction {
     /** The emoji character, e.g. "🎉". */
     emoji: string;

package/dist/Chat/index.d.ts

@@ -4,12 +4,12 @@
  * @output Exports lab chat components and related types
  * @position Lab Chat entry point; re-exported by packages/lab/src/index.ts
  */
-export { ChatReactionBar } from './ChatReactionBar';
-export type { ChatReactionBarProps, ChatReaction } from './ChatReactionBar';
-export { ChatEmojiPicker, DEFAULT_CHAT_EMOJIS } from './ChatEmojiPicker';
-export type { ChatEmojiPickerProps, ChatEmojiOption } from './ChatEmojiPicker';
-export { ChatUnreadDivider } from './ChatUnreadDivider';
-export type { ChatUnreadDividerProps } from './ChatUnreadDivider';
-export { ChatTypingIndicator } from './ChatTypingIndicator';
-export type { ChatTypingIndicatorProps } from './ChatTypingIndicator';
+export { ChatReactionBar } from './ChatReactionBar.js';
+export type { ChatReactionBarProps, ChatReaction } from './ChatReactionBar.js';
+export { ChatEmojiPicker, DEFAULT_CHAT_EMOJIS } from './ChatEmojiPicker.js';
+export type { ChatEmojiPickerProps, ChatEmojiOption } from './ChatEmojiPicker.js';
+export { ChatUnreadDivider } from './ChatUnreadDivider.js';
+export type { ChatUnreadDividerProps } from './ChatUnreadDivider.js';
+export { ChatTypingIndicator } from './ChatTypingIndicator.js';
+export type { ChatTypingIndicatorProps } from './ChatTypingIndicator.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/CircularProgress/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file CircularProgress component barrel export
  */
-export { CircularProgress } from './CircularProgress';
-export type { CircularProgressProps, CircularProgressSize, CircularProgressVariant, CircularProgressVariantMap, } from './CircularProgress';
+export { CircularProgress } from './CircularProgress.js';
+export type { CircularProgressProps, CircularProgressSize, CircularProgressVariant, CircularProgressVariantMap, } from './CircularProgress.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/CodeEditor/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file CodeEditor component barrel export
  */
-export { CodeEditor } from './CodeEditor';
-export type { CodeEditorProps } from './CodeEditor';
+export { CodeEditor } from './CodeEditor.js';
+export type { CodeEditorProps } from './CodeEditor.js';
 //# sourceMappingURL=index.d.ts.map

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"}

package/dist/CommentPin/CommentPin.js

@@ -5,8 +5,10 @@
 /**
  * @file CommentPin.tsx
  * @input Ordered participants (grouped pins show at most three circles),
- *   total and unread represented thread counts, controlled
- *   selected/dimmed/resolved/disabled state, and button DOM props
+ *   total and unread represented thread counts (unread shows as a dot), a
+ *   size on the element-size
+ *   scale, controlled selected/dimmed/resolved/disabled state, and button DOM
+ *   props
  * @output Exports the avatar-first CommentPin button and its public types
  * @position Lab collaboration primitive for annotation anchors over content or
  *   in content margins; callers own grouping, coordinates, and opened content
@@ -23,11 +25,15 @@ import * as stylex from '@stylexjs/stylex';
 import { Avatar } from '@astryxdesign/core/Avatar';
 import { AvatarGroup, AvatarGroupOverflow } from '@astryxdesign/core/AvatarGroup';
 import { useDevWarning, useMergedRefs, usePressFeedback } from '@astryxdesign/core/hooks';
+import { Icon } from '@astryxdesign/core/Icon';
+import { StatusDot } from '@astryxdesign/core/StatusDot';
 import '@astryxdesign/core/theme/tokens.stylex';
-import { borderVars, colorVars, fontWeightVars, radiusVars, shadowVars, sizeVars, spacingVars, typeScaleVars, typographyVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { borderVars, colorVars, fontWeightVars, shadowVars, sizeVars, spacingVars, typeScaleVars, typographyVars } from '@astryxdesign/core/theme/tokens.stylex';
 import { useTooltip } from '@astryxdesign/core/Tooltip';
 import { focusOutlineProps, interactionOverlayStyles, mergeProps, themeProps } from '@astryxdesign/core/utils';
 
+/** Pin heights on the shared element-size scale: 28, 32, or 36px. */
+
 /** Identity data for one representative shown inside a CommentPin. */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
@@ -41,17 +47,11 @@ const styles = {
     kmuXW: "x2lah0s",
     kXLuUW: "xxymvpz",
     k3nNDw: "x1bd091l x173emx3",
-    k7Eaqz: "x1nkkqge",
-    kZKoxP: "x6k0iem",
     kogj98: "x1ghz6dp",
-    kmVPX3: "x12nba7r",
     kMzoRj: "x1litavf",
     ksu8eU: "x1y0btm7",
     kVAM5u: "x9r1u3d",
-    krdFHd: "x19415el",
-    kfmiAY: "x8agd5o",
-    kT0f0o: "x1dgc8on",
-    kVL7Gh: "x1pczhz8",
+    kVL7Gh: "x6en5u8",
     kWkggS: "x1prclbq",
     kKwaWg: "x18o3ruo",
     kGVxlE: "x14hfi27",
@@ -68,8 +68,6 @@ const styles = {
   withCount: {
     kjj79g: "x1nhvcw1",
     kOIVth: "xzye2dw",
-    kZCmMZ: "x138rykx",
-    kwRFfy: "x1djylfy",
     $$css: true
   },
   selected: {
@@ -81,15 +79,6 @@ const styles = {
     kMwMTN: "xv1l7n4 x1k5gbb1",
     $$css: true
   },
-  resolved: {
-    kAXs8y: "x1kzknox",
-    kVAM5u: "x9r1u3d x1w1tqly",
-    kWkggS: "xwmxj5m x9yvj25",
-    kGVxlE: "x1gnnqk1",
-    kMwMTN: "xv1l7n4 xs5hli",
-    kSiTet: "xf9vgkq x1tbh5bv",
-    $$css: true
-  },
   dimmed: {
     kSiTet: "xti2d7y x1tbh5bv",
     $$css: true
@@ -102,8 +91,69 @@ const styles = {
   overflowCircle: {
     kg3NbH: "xnjsko4",
     $$css: true
+  },
+  unreadDot: {
+    kAXs8y: "x1kzknox",
+    kMwMTN: "x17wrial x1q73b31",
+    kWkggS: "x1ewilqj x438xzl",
+    $$css: true
   }
 };
+
+// Each size pairs an element-size height with a participant circle diameter
+// (see AVATAR_SIZE). The padding is the inset that centers that circle in the
+// height, applied on every side: the avatars and overflow sit the same
+// distance from all four edges. The three round corners are half the height,
+// which is fully round: the 9999px full-radius token would make the browser
+// scale every corner down to fit the box (the CSS corner-overlap rule) and
+// shrink the 2px anchor corner to nothing.
+const sizeStyles = {
+  sm: {
+    k7Eaqz: "x1nkkqge",
+    kZKoxP: "x6k0iem",
+    kmVPX3: "x5pt662",
+    krdFHd: "x404ayl",
+    kfmiAY: "x1096wwc",
+    kT0f0o: "xjc3rfe",
+    $$css: true
+  },
+  md: {
+    k7Eaqz: "x17ydmr0",
+    kZKoxP: "x1ueg155",
+    kmVPX3: "xnvfkzk",
+    krdFHd: "x17mafka",
+    kfmiAY: "x1fefpn5",
+    kT0f0o: "x11o29ay",
+    $$css: true
+  },
+  lg: {
+    k7Eaqz: "x1je4dsv",
+    kZKoxP: "xssyfek",
+    kmVPX3: "x1fx55se",
+    krdFHd: "xgwm7ou",
+    kfmiAY: "x7b04l7",
+    kT0f0o: "x9hxrvx",
+    $$css: true
+  }
+};
+
+/**
+ * Participant circle diameter per pin size, matching the literals in
+ * `sizeStyles`. Avatar renders any pixel size; its typed scale lists neither
+ * 22 nor 28, hence the cast.
+ */
+const AVATAR_SIZE = {
+  sm: 22,
+  md: 24,
+  lg: 28
+};
+
+/** The overflow ellipsis per pin size. */
+const OVERFLOW_ICON_SIZE = {
+  sm: 'xsm',
+  md: 'xsm',
+  lg: 'sm'
+};
 function takeDistinctParticipants(participants, limit) {
   const result = [];
   const seen = new Set();
@@ -135,7 +185,8 @@ const MAX_GROUP_CIRCLES = 3;
  * 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
  * ```
@@ -161,6 +212,7 @@ const MAX_GROUP_CIRCLES = 3;
 export function CommentPin({
   label,
   participants,
+  size = 'sm',
   threadCount = 1,
   unreadCount = 0,
   isSelected = false,
@@ -173,6 +225,8 @@ export function CommentPin({
   style,
   ...rest
 }) {
+  const resolvedSize = size === 'md' || size === 'lg' ? size : 'sm';
+  const avatarSize = AVATAR_SIZE[resolvedSize];
   const validThreadCount = isValidThreadCount(threadCount);
   const resolvedThreadCount = validThreadCount ? threadCount : 1;
   const isGrouped = resolvedThreadCount > 1;
@@ -181,7 +235,7 @@ export function CommentPin({
   const hasUnread = resolvedUnreadCount > 0;
 
   // Grouped pins cap at MAX_GROUP_CIRCLES circles: every distinct participant
-  // when they fit, otherwise one fewer Avatar plus a `+N` overflow circle.
+  // when they fit, otherwise one fewer Avatar plus an ellipsis overflow circle.
   const distinctParticipants = takeDistinctParticipants(participants, isGrouped ? Number.POSITIVE_INFINITY : 1);
   const hasOverflow = isGrouped && distinctParticipants.length > MAX_GROUP_CIRCLES;
   const visibleParticipants = hasOverflow ? distinctParticipants.slice(0, MAX_GROUP_CIRCLES - 1) : distinctParticipants;
@@ -197,6 +251,13 @@ export function CommentPin({
     isEnabled: hasTooltip
   });
   const mergedRef = useMergedRefs(ref, hasTooltip ? tooltip.ref : undefined);
+
+  // Resolved discussion leaves the content. A selected pin stays, so a thread
+  // the reader opened (or resolved from its popover) keeps its anchor until
+  // the host clears the selection.
+  if (isResolved && !isSelected) {
+    return null;
+  }
   const avatarParticipants = visibleParticipants.length > 0 ? visibleParticipants : [{
     id: '__anonymous__',
     name: '',
@@ -211,46 +272,62 @@ export function CommentPin({
     "aria-pressed": isSelected,
     disabled: isDisabled,
     ...mergeProps(themeProps('comment-pin', {
+      size: resolvedSize,
       grouped: isGrouped ? 'grouped' : null,
       unread: hasUnread ? 'unread' : null,
       selected: isSelected ? 'selected' : null,
       dimmed: isDimmed ? 'dimmed' : null,
       resolved: isResolved ? 'resolved' : null,
       disabled: isDisabled ? 'disabled' : null
-    }), focusOutlineProps.focusVisible(styles.root, interactionOverlayStyles.backgroundImage, (isGrouped || hasUnread) && styles.withCount, isResolved && !isSelected && styles.resolved, isDimmed && !isSelected && styles.dimmed, isSelected && styles.selected, isDisabled && styles.disabled, xstyle), className, style),
+    }), focusOutlineProps.focusVisible(styles.root, sizeStyles[resolvedSize], interactionOverlayStyles.backgroundImage, (isGrouped || hasUnread) && styles.withCount, isDimmed && !isSelected && styles.dimmed, isSelected && styles.selected, isDisabled && styles.disabled, xstyle), className, style),
     children: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       ...{
-        className: "x3nfvp2 x6s0dn4 x2lah0s"
-      },
+        0: {
+          className: "x3nfvp2 x6s0dn4 x2lah0s"
+        },
+        1: {
+          className: "x3nfvp2 x6s0dn4 x2lah0s xe9ewy2"
+        }
+      }[!!isGrouped << 0],
       children: isGrouped ? /*#__PURE__*/_jsxs(AvatarGroup, {
-        size: "xsm",
+        size: avatarSize,
         children: [avatarParticipants.map(participant => /*#__PURE__*/_jsx(Avatar, {
           name: participant.name,
           src: participant.avatarSrc,
           tooltip: false
         }, participant.id)), overflowCount > 0 ? /*#__PURE__*/_jsx(AvatarGroupOverflow, {
           count: overflowCount,
-          xstyle: styles.overflowCircle
+          xstyle: styles.overflowCircle,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "moreHorizontal",
+            size: OVERFLOW_ICON_SIZE[resolvedSize]
+          })
         }) : null]
       }) : avatarParticipants.map(participant => /*#__PURE__*/_jsx(Avatar, {
         name: participant.name,
         src: participant.avatarSrc,
-        size: "xsm",
+        size: avatarSize,
         tooltip: false
       }, participant.id))
-    }), hasUnread ? /*#__PURE__*/_jsx("span", {
-      "aria-hidden": "true",
-      ...{
-        className: "x1kzknox x3nfvp2 x6s0dn4 xl56j7k x9f619 x16asifk x1grt7ep x7a5moj xjspbzw x1ewilqj x1jzqe4 x17wrial x1k5gbb1 xss6m8b xo5v014"
-      },
-      children: resolvedUnreadCount
-    }) : isGrouped ? /*#__PURE__*/_jsx("span", {
+    }), hasUnread || isGrouped ? /*#__PURE__*/_jsxs("span", {
       "aria-hidden": "true",
       ...{
-        className: "x1rg5ohu x163how x1heor9g xss6m8b x2b8uid"
+        className: "x3nfvp2 x6s0dn4 xzye2dw x1nryj5t"
       },
-      children: resolvedThreadCount
+      children: [isGrouped ? /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x1heor9g xss6m8b"
+        },
+        children: resolvedThreadCount
+      }) : null, hasUnread ?
+      /*#__PURE__*/
+      // Decorative: the button's label carries the unread context.
+      _jsx(StatusDot, {
+        variant: "accent",
+        label: "",
+        xstyle: styles.unreadDot
+      }) : null]
     }) : null]
   });
   return /*#__PURE__*/_jsxs(_Fragment, {

package/dist/CommentPin/index.d.ts

@@ -4,6 +4,6 @@
  * @output CommentPin module exports
  * @position Public Lab subpath; re-exported by packages/lab/src/index.ts
  */
-export { CommentPin } from './CommentPin';
-export type { CommentPinParticipant, CommentPinProps } from './CommentPin';
+export { CommentPin } from './CommentPin.js';
+export type { CommentPinParticipant, CommentPinProps } from './CommentPin.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Comments/CommentActions.d.ts

@@ -9,8 +9,8 @@
  */
 import { type ReactNode } from 'react';
 import { type DropdownMenuOption } from '@astryxdesign/core/DropdownMenu';
-import { type AnyComment } from './utils';
-import type { CommentReactionOption } from './types';
+import { type AnyComment } from './utils.js';
+import type { CommentReactionOption } from './types.js';
 export type CommentActionId = 'resolve' | 'reopen' | 'react' | 'reply' | 'link';
 /** Mark as resolved on an open thread, Reopen on a resolved one. */
 export type ResolveAction = {

package/dist/Comments/CommentComposer.d.ts

@@ -16,7 +16,7 @@
 import { type ReactNode, type Ref } from 'react';
 import type { BaseProps } from '@astryxdesign/core';
 import { type ChatComposerTrigger } from '@astryxdesign/core/Chat';
-import type { CommentAgentCommand, CommentAnchor, CommentComposerContext, CommentComposerRenderProps, CommentHighlightColor, CommentUploadedImage } from './types';
+import type { CommentAgentCommand, CommentAnchor, CommentComposerContext, CommentComposerRenderProps, CommentHighlightColor, CommentUploadedImage } from './types.js';
 /** Props the family's threads pass to their composers. */
 export interface CommentComposerBaseProps {
     value: string;

package/dist/Comments/CommentMarkdown.d.ts

@@ -1,7 +1,7 @@
 import { type ChatComposerToken } from '@astryxdesign/core/Chat';
 import { type MarkdownInlinePlugin } from '@astryxdesign/core/Markdown';
 import type { MarkdownPluginEntry } from '@astryxdesign/core/Markdown/plugins';
-import type { CommentAgentCommand } from './types';
+import type { CommentAgentCommand } from './types.js';
 /** An agent's chip: what the composer's `/` menu inserts, and what a posted
  *  comment shows in place of the command. */
 export declare function agentToken(agent: CommentAgentCommand): ChatComposerToken;

package/dist/Comments/CommentParts.d.ts

@@ -10,8 +10,8 @@
  */
 import { type CSSProperties, type ReactNode, type Ref } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { type AnyComment } from './utils';
-import type { CommentAnchor, CommentHighlightColor, CommentProgress, CommentUser, CommentVersion, CommentActivityEvent } from './types';
+import { type AnyComment } from './utils.js';
+import type { CommentAnchor, CommentHighlightColor, CommentProgress, CommentUser, CommentVersion, CommentActivityEvent } from './types.js';
 /** The 28px avatar column every comment row, reply, and event aligns to. */
 export declare const AVATAR_SIZE: string;
 /**

package/dist/Comments/CommentRow.d.ts

@@ -1,4 +1,4 @@
-import { type AnyComment } from './utils';
+import { type AnyComment } from './utils.js';
 export type ThreadDivider = 'top' | 'bottom';
 export declare const THREAD_DIVIDERS: readonly ThreadDivider[];
 /**

package/dist/Comments/CommentThread.d.ts

@@ -17,7 +17,7 @@
  */
 import { type Ref } from 'react';
 import type { BaseProps } from '@astryxdesign/core';
-import type { CommentThreadData, CommentThreadSharedProps } from './types';
+import type { CommentThreadData, CommentThreadSharedProps } from './types.js';
 export interface CommentThreadProps extends CommentThreadSharedProps, Omit<BaseProps<HTMLElement>, keyof CommentThreadSharedProps | 'onChange' | 'onSubmit'> {
     /** Ref forwarded to the root element. */
     ref?: Ref<HTMLElement>;

package/dist/Comments/Comments.d.ts

@@ -14,7 +14,7 @@
  */
 import { type ReactNode, type Ref } from 'react';
 import type { BaseProps } from '@astryxdesign/core';
-import type { CommentAnchor, CommentThreadData, CommentThreadSharedProps, CommentActivityEvent } from './types';
+import type { CommentAnchor, CommentThreadData, CommentThreadSharedProps, CommentActivityEvent } from './types.js';
 export interface CommentsProps extends CommentThreadSharedProps, Omit<BaseProps<HTMLElement>, keyof CommentThreadSharedProps | 'onChange' | 'onSubmit'> {
     /** Ref forwarded to the root element. */
     ref?: Ref<HTMLElement>;

package/dist/Comments/CommentsContext.d.ts

@@ -13,8 +13,8 @@ import { type RefObject } from 'react';
 import type { ChatComposerTrigger } from '@astryxdesign/core/Chat';
 import type { MarkdownInlinePlugin } from '@astryxdesign/core/Markdown';
 import type { MarkdownPluginEntry } from '@astryxdesign/core/Markdown/plugins';
-import { type AnyComment } from './utils';
-import { type CommentAgentCommand, type CommentHighlightColor, type CommentImageUploader, type CommentMode, type CommentReactionOption, type CommentThreadData, type CommentThreadSharedProps, type CommentUser } from './types';
+import { type AnyComment } from './utils.js';
+import { type CommentAgentCommand, type CommentHighlightColor, type CommentImageUploader, type CommentMode, type CommentReactionOption, type CommentThreadData, type CommentThreadSharedProps, type CommentUser } from './types.js';
 /** The thread a reply composer is open in, and the comment it answers. */
 export type ReplyTarget = {
     parentId: string;

package/dist/Comments/i18n.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/locales/en.json (@astryx.comments.reaction*)
  */
 import type { TranslatorFn } from '@astryxdesign/core/i18n';
-import type { CommentReactionOption } from './types';
+import type { CommentReactionOption } from './types.js';
 /**
  * A reaction's human-readable name: the host's `description`, else the
  * localized name of a default reaction, else its glyph.