@astryxdesign/lab 0.7.5-canary.fccd771 → 0.7.5-canary.fd0aba8

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.js

@@ -106,15 +106,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: {

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/Comments/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/Comments/icons.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAG9E,kEAAkE;AAClE,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,iBAAiB,CAAC;AA2E7D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAmB,EACnB,IAAW,GACZ,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC,+BASA"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/Comments/icons.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAG9E,kEAAkE;AAClE,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAkF7D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAmB,EACnB,IAAW,GACZ,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC,+BASA"}

package/dist/Comments/icons.js

@@ -16,7 +16,7 @@ import { getExtendedIcon, Icon } from '@astryxdesign/core/Icon';
 import { useThemeName } from '@astryxdesign/core/theme';
 
 /** Stable icon-registry keys for the Comments family's glyphs. */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export const COMMENT_ICON_KEYS = {
   addReaction: 'comment:addReaction',
   reply: 'comment:reply',
@@ -72,6 +72,13 @@ const FALLBACK_GLYPHS = {
   event: glyph(['M12 3v5.5M12 15.5V21', 'M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'])
 };
 
+/**
+ * The fallback `getExtendedIcon` returns only when no theme, registered, or
+ * built-in entry answers a key. A function entry that returns `null` still
+ * answers it: its result is final, so the glyph draws nothing.
+ */
+const NO_ENTRY = /*#__PURE__*/_jsx(_Fragment, {});
+
 /**
  * A comment glyph at the icon slot's size: the active theme's icon for its
  * `comment:*` key when one is registered, else the bundled default.
@@ -83,7 +90,7 @@ export function CommentIcon({
 }) {
   const themeName = useThemeName();
   const key = COMMENT_ICON_KEYS[name];
-  const hasOverride = getExtendedIcon(key, undefined, themeName) != null;
+  const hasOverride = getExtendedIcon(key, NO_ENTRY, themeName) !== NO_ENTRY;
   const fallback = name in REGISTRY_FALLBACKS ? REGISTRY_FALLBACKS[name] : FALLBACK_GLYPHS[name];
   return /*#__PURE__*/_jsx(Icon, {
     icon: hasOverride ? key : fallback,

package/dist/DiffViewer/DiffViewer.d.ts

@@ -1,5 +1,6 @@
 import { type MouseEvent, type ReactNode, type Ref } from 'react';
 import type { BaseProps } from '@astryxdesign/core';
+import { type CodeLanguage } from '@astryxdesign/core/CodeBlock';
 import { type SyntaxThemeDefinition } from '@astryxdesign/core/theme/syntax';
 import type { DiffViewerFile, DiffViewerLineRef } from './diffTypes.js';
 /** How hunks are laid out: one column, or old and new side by side. */
@@ -34,10 +35,20 @@ export interface DiffViewerProps extends BaseProps<HTMLDivElement> {
      */
     viewMode?: DiffViewerViewMode;
     /**
-     * Syntax-highlighting language. Defaults to one inferred from the file's
-     * extension; unknown extensions render as plain text.
+     * Syntax-highlighting language: a built-in identifier such as `'rust'`, or
+     * a language value — a module imported on its own, such as `graphql` from
+     * `@astryxdesign/core/CodeBlock/languages/graphql`, or one made with
+     * `createCodeLanguage`. Defaults to one inferred from the file's name or
+     * extension among the built-ins and `codeLanguages`; an unmatched file
+     * renders as plain text.
      */
-    language?: string;
+    language?: string | CodeLanguage;
+    /**
+     * Language values the file's name or extension may infer, such as
+     * `[graphql, dockerfile]`; a later entry wins. Pass the same list to every
+     * DiffViewer on a review page.
+     */
+    codeLanguages?: ReadonlyArray<CodeLanguage>;
     /**
      * Show the old and new line-number gutters.
      * @default true
@@ -125,7 +136,7 @@ export interface DiffViewerProps extends BaseProps<HTMLDivElement> {
  * <DiffViewer file={file} viewMode="split" />
  * ```
  */
-export declare function DiffViewer({ ref, file, viewMode, language: languageProp, hasLineNumbers, isWrapped, changeIndicator, inlineHighlight, hasChangeBackground, isCollapsible, isCollapsed: isCollapsedProp, defaultIsCollapsed, onCollapsedChange, headerEnd, renderLineAnnotation, onLineNumberClick, maxHeight, syntaxTheme, xstyle, className, style, ...props }: DiffViewerProps): import("react").JSX.Element;
+export declare function DiffViewer({ ref, file, viewMode, language: languageProp, codeLanguages, hasLineNumbers, isWrapped, changeIndicator, inlineHighlight, hasChangeBackground, isCollapsible, isCollapsed: isCollapsedProp, defaultIsCollapsed, onCollapsedChange, headerEnd, renderLineAnnotation, onLineNumberClick, maxHeight, syntaxTheme, xstyle, className, style, ...props }: DiffViewerProps): import("react").JSX.Element;
 export declare namespace DiffViewer {
     var displayName: string;
 }

package/dist/DiffViewer/DiffViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiffViewer.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/DiffViewer.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,GAAG,EAET,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAalD,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,iCAAiC,CAAC;AAqBzC,OAAO,KAAK,EACV,cAAc,EAGd,iBAAiB,EAElB,MAAM,aAAa,CAAC;AAGrB,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;;OAGG;IACH,IAAI,EAAE,cAAc,CAAC;IACrB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC7D;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAClB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KACjC,IAAI,CAAC;IACV,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAk0BD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,IAAI,EACJ,QAAoB,EACpB,QAAQ,EAAE,YAAY,EACtB,cAAqB,EACrB,SAAiB,EACjB,eAA2B,EAC3B,eAAwB,EACxB,mBAA0B,EAC1B,aAAoB,EACpB,WAAW,EAAE,eAAe,EAC5B,kBAA0B,EAC1B,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BAopBjB;yBA3qBe,UAAU"}
+{"version":3,"file":"DiffViewer.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/DiffViewer.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,GAAG,EAET,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAGL,KAAK,YAAY,EAGlB,MAAM,8BAA8B,CAAC;AAOtC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,iCAAiC,CAAC;AAqBzC,OAAO,KAAK,EACV,cAAc,EAGd,iBAAiB,EAElB,MAAM,aAAa,CAAC;AAGrB,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;;OAGG;IACH,IAAI,EAAE,cAAc,CAAC;IACrB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC7D;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAClB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KACjC,IAAI,CAAC;IACV,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAi2BD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,IAAI,EACJ,QAAoB,EACpB,QAAQ,EAAE,YAAY,EACtB,aAAa,EACb,cAAqB,EACrB,SAAiB,EACjB,eAA2B,EAC3B,eAAwB,EACxB,mBAA0B,EAC1B,aAAoB,EACpB,WAAW,EAAE,eAAe,EAC5B,kBAA0B,EAC1B,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BAopBjB;yBA5qBe,UAAU"}

package/dist/DiffViewer/DiffViewer.js

@@ -92,18 +92,42 @@ const EXTENSION_LANGUAGES = {
   yaml: 'yaml',
   yml: 'yaml',
   md: 'markdown',
-  markdown: 'markdown'
+  markdown: 'markdown',
+  c: 'c',
+  h: 'c',
+  cpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  hpp: 'cpp',
+  hh: 'cpp',
+  sql: 'sql',
+  rs: 'rust',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  swift: 'swift',
+  go: 'go'
 };
-function inferLanguage(path) {
+
+/**
+ * The language a file's name or extension infers: a listed value first (a
+ * later entry wins), then a built-in, else plain text (CodeBlock FR13).
+ */
+function inferLanguage(path, codeLanguages) {
   if (path == null) {
     return 'plaintext';
   }
   const base = path.slice(path.lastIndexOf('/') + 1);
   const dot = base.lastIndexOf('.');
-  if (dot <= 0) {
-    return 'plaintext';
+  const extension = dot > 0 ? base.slice(dot + 1).toLowerCase() : null;
+  if (codeLanguages != null) {
+    for (let i = codeLanguages.length - 1; i >= 0; i--) {
+      const language = codeLanguages[i];
+      if (language.fileNames.includes(base) || extension != null && language.fileExtensions.includes(extension)) {
+        return language;
+      }
+    }
   }
-  return EXTENSION_LANGUAGES[base.slice(dot + 1).toLowerCase()] ?? 'plaintext';
+  return extension == null ? 'plaintext' : EXTENSION_LANGUAGES[extension] ?? 'plaintext';
 }
 
 // ---------------------------------------------------------------------------
@@ -698,6 +722,7 @@ export function DiffViewer({
   file,
   viewMode = 'unified',
   language: languageProp,
+  codeLanguages,
   hasLineNumbers = true,
   isWrapped = false,
   changeIndicator = 'classic',
@@ -723,7 +748,7 @@ export function DiffViewer({
     ensureHighlightStyles();
   }, []);
   const path = file.newPath ?? file.oldPath;
-  const language = languageProp ?? inferLanguage(path);
+  const language = languageProp ?? inferLanguage(path, codeLanguages);
   const displayPath = file.status === 'renamed' && file.oldPath != null && file.newPath != null ? t('@astryx.diffViewer.renamedPath', {
     oldPath: file.oldPath,
     newPath: file.newPath

package/dist/EmojiPicker/EmojiPicker.js

@@ -399,19 +399,16 @@ export function EmojiPicker({
             size: "sm",
             label: t('@astryx.emojiPicker.loading')
           })
-        }) : queryWords.length === 0 && categories === 'failed' ? /*#__PURE__*/_jsx(HStack, {
-          paddingInline: 3,
-          children: /*#__PURE__*/_jsx(Text, {
-            type: "supporting",
-            color: "secondary",
-            children: t('@astryx.emojiPicker.loadFailed')
-          })
         }) : null, /*#__PURE__*/_jsx(HStack, {
           role: "status",
           "aria-atomic": "true",
           paddingInline: 3,
           "data-emoji-picker-search-status": "true",
-          children: noResultsMessage != null && /*#__PURE__*/_jsx(Text, {
+          children: queryWords.length === 0 && categories === 'failed' ? /*#__PURE__*/_jsx(Text, {
+            type: "supporting",
+            color: "secondary",
+            children: t('@astryx.emojiPicker.loadFailed')
+          }) : noResultsMessage != null && /*#__PURE__*/_jsx(Text, {
             type: "supporting",
             color: "secondary",
             children: noResultsMessage

package/dist/InfoTip/InfoTip.d.ts

@@ -2,7 +2,7 @@
  * @file InfoTip.tsx
  * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
  * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC facebook/astryx#3349); core implementation consumed by index.ts
+ * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)

package/dist/InfoTip/InfoTip.js

@@ -6,7 +6,7 @@
  * @file InfoTip.tsx
  * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
  * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC facebook/astryx#3349); core implementation consumed by index.ts
+ * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)

package/dist/ListInput/ListInput.d.ts

@@ -2,7 +2,7 @@
  * @file ListInput.tsx
  * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, the container-reveal hook, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
  * @output Exports ListInput and its controlled data, column, renderer, and change types
- * @position Lab experiment (RFC facebook/astryx#4531) for editing compact repeated records
+ * @position Lab experiment (RFC meta/astryx#4531) for editing compact repeated records
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/lab/src/ListInput/ListInput.doc.mjs