@astryxdesign/core 0.6.3-canary.ea2f048 → 0.6.3

package/dist/Chat/ChatLayout.d.ts

@@ -70,25 +70,6 @@ export interface ChatLayoutProps extends BaseProps<HTMLDivElement> {
      */
     density?: Density;
 }
-/**
- * Layout shell for a full chat interface: messages in page flow, composer
- * docked to the bottom behind a frosted glass layer, with auto-scroll and a
- * scroll-to-bottom button wired in.
- *
- * @example
- * ```
- * <ChatLayout
- *   density="spacious"
- *   composer={<ChatComposer onSubmit={send} />}
- *   emptyState={<EmptyState title="No messages yet" />}>
- *   <ChatMessageList>
- *     <ChatMessage sender="assistant">
- *       <ChatMessageBubble>How can I help?</ChatMessageBubble>
- *     </ChatMessage>
- *   </ChatMessageList>
- * </ChatLayout>
- * ```
- */
 export declare function ChatLayout({ children, composer, density, emptyState, scrollButton, scrollRef: externalScrollRef, xstyle, className, style, 'data-testid': testId, ref, ...rest }: ChatLayoutProps): import("react").JSX.Element;
 export declare namespace ChatLayout {
     var displayName: string;

package/dist/Chat/ChatLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4KD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA4GjB;yBAzHe,UAAU"}
+{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4KD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA4GjB;yBAzHe,UAAU"}

package/dist/Chat/ChatLayout.js

@@ -184,25 +184,6 @@ function hasVisibleContent(children) {
 // Component
 // =============================================================================
 
-/**
- * Layout shell for a full chat interface: messages in page flow, composer
- * docked to the bottom behind a frosted glass layer, with auto-scroll and a
- * scroll-to-bottom button wired in.
- *
- * @example
- * ```
- * <ChatLayout
- *   density="spacious"
- *   composer={<ChatComposer onSubmit={send} />}
- *   emptyState={<EmptyState title="No messages yet" />}>
- *   <ChatMessageList>
- *     <ChatMessage sender="assistant">
- *       <ChatMessageBubble>How can I help?</ChatMessageBubble>
- *     </ChatMessage>
- *   </ChatMessageList>
- * </ChatLayout>
- * ```
- */
 export function ChatLayout({
   children,
   composer,

package/dist/Chat/ChatLayoutScrollButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAkC7B;yBA3Ce,sBAAsB"}
+{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAkC7B;yBA3Ce,sBAAsB"}

package/dist/Chat/ChatLayoutScrollButton.js

@@ -18,7 +18,7 @@
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, radiusVars, shadowVars, sizeVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { Icon } from "../Icon/index.js";
 import { Button } from "../Button/index.js";
 import { mergeProps } from "../utils/index.js";
@@ -82,16 +82,16 @@ export function ChatLayoutScrollButton({
     children: /*#__PURE__*/_jsx("div", {
       ...{
         0: {
-          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1jys5uj"
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl x1x67gh"
         },
         2: {
-          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w xnpuxes x1jys5uj"
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w x1x67gh"
         },
         1: {
-          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1ncir08"
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl x1ncir08"
         },
         3: {
-          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w xnpuxes x1ncir08"
+          className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w x1ncir08"
         }
       }[!!isVisible << 1 | !!label << 0],
       children: /*#__PURE__*/_jsx(Button, {

package/dist/astryx.css

@@ -1281,7 +1281,7 @@
   .xnpjden:not(#\#):not(#\#):not(#\#){transition-property:opacity,background-color}
   .xsm4mo9:not(#\#):not(#\#):not(#\#){transition-property:opacity,display,overlay}
   .x1n1p2mu:not(#\#):not(#\#):not(#\#){transition-property:opacity,position}
-  .xrgg2z9:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,max-width,visibility}
+  .x1apppo2:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,max-width}
   .x4bbghf:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,overlay,display}
   .x6o7n8i:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform}
   .xxup5nn:not(#\#):not(#\#):not(#\#){transition-property:opacity,visibility,transform}
@@ -1656,6 +1656,7 @@
   .x55n99s:not(#\#):not(#\#):not(#\#):not(#\#){max-width:15em}
   .x1ncir08:not(#\#):not(#\#):not(#\#):not(#\#){max-width:200px}
   .xw5ewwj:not(#\#):not(#\#):not(#\#):not(#\#){max-width:300px}
+  .x1x67gh:not(#\#):not(#\#):not(#\#):not(#\#){max-width:32px}
   .xxc7z9f:not(#\#):not(#\#):not(#\#):not(#\#){max-width:360px}
   .x1j9u4d2:not(#\#):not(#\#):not(#\#):not(#\#){max-width:400px}
   .x17fpy1y:not(#\#):not(#\#):not(#\#):not(#\#){max-width:480px}
@@ -1670,7 +1671,6 @@
   .x1m1aaou:not(#\#):not(#\#):not(#\#):not(#\#){max-width:min(960px,calc(100dvw - var(--spacing-4)))}
   .x1x1rfll:not(#\#):not(#\#):not(#\#):not(#\#){max-width:none}
   .xjl2t3p:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--layout-content-width,none)}
-  .x1jys5uj:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--size-element-md)}
   .xf68679:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--x-maxWidth)}
   .x2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}
   .x1us19tq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:100%}

package/dist/index.d.ts

@@ -107,7 +107,6 @@ export * from './Skeleton';
 export * from './StatusDot';
 export * from './Spinner';
 export * from './Timestamp';
-export * from './Timer';
 export * from './Overlay';
 export * from './Outline';
 export * from './OverflowList';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -133,9 +133,6 @@ export * from "./Spinner/index.js";
 // Timestamp display
 export * from "./Timestamp/index.js";
 
-// Elapsed timer display
-export * from "./Timer/index.js";
-
 // Overlay
 export * from "./Overlay/index.js";
 export * from "./Outline/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.6.3-canary.ea2f048",
+  "version": "0.6.3",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -539,11 +539,6 @@
       "types": "./dist/TimeInput/index.d.ts",
       "default": "./dist/TimeInput/index.js"
     },
-    "./Timer": {
-      "source": "./src/Timer/index.ts",
-      "types": "./dist/Timer/index.d.ts",
-      "default": "./dist/Timer/index.js"
-    },
     "./Timestamp": {
       "source": "./src/Timestamp/index.ts",
       "types": "./dist/Timestamp/index.d.ts",
@@ -692,8 +687,6 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.6.3-canary.ea2f048",
-    "@astryxdesign/cli": "0.6.3-canary.ea2f048",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -703,7 +696,9 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "@types/babel__core": "^7.20.5"
+    "@types/babel__core": "^7.20.5",
+    "@astryxdesign/a11y-spec": "0.0.0",
+    "@astryxdesign/cli": "0.6.3"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/Chat/ChatLayout.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'ChatLayout',
   subComponentOf: 'Chat',
   displayName: 'Chat Layout',
-  description: 'Layout shell for full chat interfaces. Messages flow in normal page flow, composer is fixed to the bottom with a frosted glass dock. Set density (compact/balanced/spacious) to control spacing, message max-width, and blur layer sizing. Includes built-in auto-scroll, a "New messages" scroll-to-bottom button, and a frosted glass blur layer behind the composer. By default the layout root is the scroll container; pass scrollRef to delegate scrolling to a parent element or the document body.',
+  description: 'Layout shell for full chat interfaces. Messages flow in normal page flow, composer is fixed to the bottom with a frosted glass dock. Adapts density (compact/balanced/spacious) automatically via container width observation. Includes built-in auto-scroll, a "New messages" scroll-to-bottom button, and a frosted glass blur layer behind the composer. By default the layout root is the scroll container; pass scrollRef to delegate scrolling to a parent element or the document body.',
   props: [
     {
       name: 'children',
@@ -53,15 +53,9 @@ export const docs = {
       type: 'React.RefObject<HTMLElement | null>',
       description: 'External scroll container ref. When provided, auto-scroll and scroll-to-bottom target this element instead of the layout root. Use when the chat is embedded in a page where a parent element or the document body scrolls.',
     },
-    {
-      name: 'density',
-      type: "'compact' | 'balanced' | 'spacious'",
-      description: 'Visual density: controls dock padding, message-area max-width and inline padding, and the height of the frosted glass blur layer.',
-      default: "'balanced'",
-    },
   ],
   usage: {
-    description: 'ChatLayout is the layout shell for full-page chat interfaces. It renders messages in normal page flow and docks the composer to the bottom with a frosted glass blur layer. Set the density prop to control spacing; it defaults to balanced. Use it to wrap ChatMessageList and ChatComposer for a complete chat experience with built-in auto-scroll and a scroll-to-bottom button.',
+    description: 'ChatLayout is the layout shell for full-page chat interfaces. It renders messages in normal page flow and docks the composer to the bottom with a frosted glass blur layer. Density adapts automatically via container width observation. Use it to wrap ChatMessageList and ChatComposer for a complete chat experience with built-in auto-scroll and a scroll-to-bottom button.',
     bestPractices: [
       {
         guidance: true,
@@ -117,21 +111,20 @@ export const docs = {
 export const docsZh = {
   name: 'ChatLayout',
   displayName: 'Chat Layout',
-  description: '完整聊天界面的布局外壳。消息在页面中自然流动，编写器固定在底部，带有毛玻璃效果。通过 density 属性控制密度。',
+  description: '完整聊天界面的布局外壳。消息在页面中自然流动，编写器固定在底部，带有毛玻璃效果。通过容器宽度自动适配密度。',
   propDescriptions: {
     children: '消息内容，通常是 ChatMessageList。在页面中自然流动。',
     composer: '编写器元素，通常是 ChatComposer。固定在底部，带有毛玻璃底座。',
     emptyState: '子元素为空时显示的内容。',
     scrollButton: '编写器上方的滚动到底部按钮。默认使用 ChatLayoutScrollButton。传入 null 隐藏。',
     scrollRef: '外部滚动容器引用。提供时，自动滚动和滚动到底部将目标指向此元素。',
-    density: '视觉密度：控制底座内边距、消息区最大宽度和毛玻璃层高度。',
   },
 };
 
 export const docsDense = {
   name: 'ChatLayout',
   displayName: 'Chat Layout',
-  description: 'layout shell for full chat; msgs in page flow, composer fixed bottom w/ frosted glass dock; density prop (default balanced); scrollRef delegates to parent/body',
+  description: 'layout shell for full chat; msgs in page flow, composer fixed bottom w/ frosted glass dock; auto density via container width; scrollRef delegates to parent/body',
   usage: {
     bestPractices: [
       {guidance: true, description: 'Pass ChatMessageList as children and ChatComposer as composer prop for complete chat.'},
@@ -147,6 +140,5 @@ export const docsDense = {
     emptyState: 'content when children empty',
     scrollButton: 'scroll-to-bottom btn; defaults to ChatLayoutScrollButton; pass null to hide',
     scrollRef: 'external scroll container ref; targets parent/body instead of layout root',
-    density: 'visual density; dock padding, message max-width, blur height',
   },
 };

package/src/Chat/ChatLayout.test.tsx

@@ -2,7 +2,6 @@
 
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {act, render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import {ChatLayout} from './ChatLayout';
 import {ChatMessageList} from './ChatMessageList';
 import {ChatMessage} from './ChatMessage';
@@ -104,33 +103,6 @@ describe('ChatLayout', () => {
   });
 });
 
-// ---------------------------------------------------------------------------
-// Keyboard reachability of the default scroll-to-bottom button
-//
-// At rest the layout is neither scrolled up nor holding new messages, so the
-// default ChatLayoutScrollButton renders in its hidden state. It is still in
-// the DOM, and it is the first control in the dock — ahead of the composer.
-// A control nobody can see must not be a tab stop: WCAG 2.2 SC 2.4.7 requires
-// a visible focus indicator wherever focus can land, and the hidden pill paints
-// nothing. `opacity: 0` and `pointer-events: none` do not remove an element
-// from sequential focus navigation; only visibility/display/inert do.
-// ---------------------------------------------------------------------------
-
-describe('ChatLayout — default scroll button keyboard reachability', () => {
-  it('does not make the resting scroll-to-bottom button the first tab stop', async () => {
-    const user = userEvent.setup();
-    render(
-      <ChatLayout composer={<button type="button">Send</button>}>
-        <div>msg</div>
-      </ChatLayout>,
-    );
-
-    await user.tab();
-
-    expect(screen.getByRole('button', {name: 'Send'})).toHaveFocus();
-  });
-});
-
 // ---------------------------------------------------------------------------
 // Self-scroll layout contract (#2573)
 //

package/src/Chat/ChatLayout.tsx

@@ -268,25 +268,6 @@ function hasVisibleContent(children: ReactNode): boolean {
 // Component
 // =============================================================================
 
-/**
- * Layout shell for a full chat interface: messages in page flow, composer
- * docked to the bottom behind a frosted glass layer, with auto-scroll and a
- * scroll-to-bottom button wired in.
- *
- * @example
- * ```
- * <ChatLayout
- *   density="spacious"
- *   composer={<ChatComposer onSubmit={send} />}
- *   emptyState={<EmptyState title="No messages yet" />}>
- *   <ChatMessageList>
- *     <ChatMessage sender="assistant">
- *       <ChatMessageBubble>How can I help?</ChatMessageBubble>
- *     </ChatMessage>
- *   </ChatMessageList>
- * </ChatLayout>
- * ```
- */
 export function ChatLayout({
   children,
   composer,

package/src/Chat/ChatLayoutScrollButton.test.tsx

@@ -2,7 +2,6 @@
 
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import {ChatLayoutScrollButton} from './ChatLayoutScrollButton';
 
 describe('ChatLayoutScrollButton', () => {
@@ -53,34 +52,4 @@ describe('ChatLayoutScrollButton', () => {
     expect(root).toHaveAttribute('data-custom', 'x');
     expect(root).toHaveAttribute('id', 'scroll-1');
   });
-
-  // The hidden state paints nothing, so focus landing on it would have no
-  // visible indicator (WCAG 2.2 SC 2.4.7). `opacity: 0` and
-  // `pointer-events: none` suppress paint and the pointer but leave the button
-  // in sequential focus navigation, so the hidden state must also stop being
-  // focusable — without costing the visible state its keyboard access.
-  it('is keyboard reachable while visible', async () => {
-    const user = userEvent.setup();
-    render(<ChatLayoutScrollButton isVisible onClick={() => {}} />);
-
-    await user.tab();
-
-    expect(
-      screen.getByRole('button', {name: 'Scroll to bottom'}),
-    ).toHaveFocus();
-  });
-
-  it('is not keyboard reachable while hidden', async () => {
-    const user = userEvent.setup();
-    render(
-      <>
-        <ChatLayoutScrollButton isVisible={false} onClick={() => {}} />
-        <button type="button">After</button>
-      </>,
-    );
-
-    await user.tab();
-
-    expect(screen.getByRole('button', {name: 'After'})).toHaveFocus();
-  });
 });

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -23,7 +23,6 @@ import {
   spacingVars,
   radiusVars,
   shadowVars,
-  sizeVars,
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
@@ -68,14 +67,8 @@ const styles = stylex.create({
     borderRadius: radiusVars['--radius-full'],
     backgroundColor: colorVars['--color-background-popover'],
     boxShadow: shadowVars['--shadow-med'],
-    // The pill clips its own content, so it must track the height of the
-    // md Button it wraps. A literal would clip that Button under any theme
-    // that retunes the element scale.
-    height: sizeVars['--size-element-md'],
-    // `visibility` rides the same transition so the fade-out still plays:
-    // it flips to `visible` immediately on the way in and only at the end
-    // of the duration on the way out.
-    transitionProperty: 'opacity, transform, max-width, visibility',
+    height: '32px',
+    transitionProperty: 'opacity, transform, max-width',
     transitionTimingFunction: easeVars['--ease-standard'],
     transitionDuration: {
       default: durationVars['--duration-fast-max'],
@@ -85,19 +78,14 @@ const styles = stylex.create({
   hidden: {
     opacity: 0,
     pointerEvents: 'none',
-    // The hidden pill paints nothing, so focus landing on it would have no
-    // visible indicator (WCAG 2.2 SC 2.4.7). `opacity` and `pointer-events`
-    // leave the button in sequential focus navigation; `visibility` removes it.
-    visibility: 'hidden',
-    maxWidth: sizeVars['--size-element-md'],
+    maxWidth: '32px',
   },
   visible: {
     opacity: 1,
     pointerEvents: 'auto',
-    visibility: 'visible',
   },
   collapsed: {
-    maxWidth: sizeVars['--size-element-md'],
+    maxWidth: '32px',
   },
   expanded: {
     maxWidth: '200px',

package/src/index.ts

@@ -161,9 +161,6 @@ export * from './Spinner';
 // Timestamp display
 export * from './Timestamp';
 
-// Elapsed timer display
-export * from './Timer';
-
 // Overlay
 export * from './Overlay';
 export * from './Outline';

package/src/tailwind-theme.css

@@ -182,6 +182,12 @@
   --text-4xl: var(--font-size-4xl);
   --text-5xl: var(--font-size-5xl);
 
+  /* --- Font weights --- */
+  --font-weight-normal: var(--font-weight-normal);
+  --font-weight-medium: var(--font-weight-medium);
+  --font-weight-semibold: var(--font-weight-semibold);
+  --font-weight-bold: var(--font-weight-bold);
+
   /* =========================================================================
    * Border radius
    *

package/dist/Timer/Timer.d.ts

@@ -1,49 +0,0 @@
-import type { BaseProps } from '../BaseProps';
-import type { TextColor, TextSize, TextType, TextWeight } from '../theme/types';
-export type TimerFormat = 'elapsed' | 'clock';
-export interface TimerProps extends Omit<BaseProps<HTMLTimeElement>, 'dateTime'> {
-    /** Ref forwarded to the rendered `<time>` element. */
-    ref?: React.Ref<HTMLTimeElement>;
-    /**
-     * Unix time in milliseconds when the measured operation began. Omit it to
-     * start counting from this Timer's mount.
-     */
-    startTime?: number;
-    /**
-     * Standard duration representation.
-     * @default 'elapsed'
-     */
-    format?: TimerFormat;
-    /**
-     * Semantic text type. Matches Timestamp typography behavior.
-     * @default 'supporting'
-     */
-    type?: TextType;
-    /** Explicit font size override. Overrides the size from `type`. */
-    size?: TextSize;
-    /**
-     * Text color.
-     * @default 'secondary'
-     */
-    color?: TextColor;
-    /** Font weight override. */
-    weight?: TextWeight;
-}
-/**
- * Displays a standardized elapsed duration without scheduling React tick renders.
- *
- * Timer writes changing text and its ISO 8601 duration directly to the owned
- * `<time>` node. Use `elapsed` for compact duration text or `clock` for a
- * stopwatch-like reading.
- *
- * @example
- * ```
- * <Timer />
- * <Timer format="clock" />
- * ```
- */
-export declare function Timer({ startTime, format, type, size, color, weight, ref, xstyle, className, style, ...rest }: TimerProps): import("react").JSX.Element;
-export declare namespace Timer {
-    var displayName: string;
-}
-//# sourceMappingURL=Timer.d.ts.map

package/dist/Timer/Timer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.d.ts","sourceRoot":"","sources":["../../src/Timer/Timer.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAsB9E,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AA8E9C,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,eAAe,CAAC,EAC1B,UAAU,CACX;IACC,sDAAsD;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mEAAmE;IACnE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,MAAkB,EAClB,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,+BA0EZ;yBAtFe,KAAK"}

package/dist/Timer/Timer.js

@@ -1,158 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file Timer.tsx
- * @input Uses an optional start time, standardized format, Timestamp typography, BaseProps, and React ref
- * @output Exports Timer, TimerProps, and TimerFormat with non-rendering elapsed-time updates
- * @position Core content primitive for elapsed duration in active operations
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Timer/Timer.spec.md
- * - /packages/core/src/Timer/Timer.doc.mjs
- * - /packages/core/src/Timer/Timer.test.tsx
- * - /packages/core/src/Timer/index.ts
- * - /apps/storybook/stories/Timer.stories.tsx
- * - /packages/cli/assets/templates/blocks/components/Timer/
- */
-import { useEffect, useRef, useState } from 'react';
-import * as stylex from '@stylexjs/stylex';
-import { useMergedRefs } from "../hooks/useMergedRefs.js";
-import { Text } from "../Text/index.js";
-import { mergeProps } from "../utils/index.js";
-import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ONE_SECOND_MS = 1000;
-const ONE_MINUTE_MS = 60 * ONE_SECOND_MS;
-const ONE_HOUR_SECONDS = 60 * 60;
-const MAX_TIMEOUT_MS = 2_147_483_647;
-function pad(value) {
-  return String(value).padStart(2, '0');
-}
-function resolveFormat(format) {
-  return format === 'clock' ? 'clock' : 'elapsed';
-}
-function getElapsedMilliseconds(now, startTime) {
-  return Math.max(0, now - startTime);
-}
-function getPresentation(elapsedMilliseconds, format) {
-  const elapsedSeconds = Math.floor(elapsedMilliseconds / ONE_SECOND_MS);
-  if (format === 'clock') {
-    const hours = Math.floor(elapsedSeconds / ONE_HOUR_SECONDS);
-    const minutes = Math.floor(elapsedSeconds % ONE_HOUR_SECONDS / 60);
-    const seconds = elapsedSeconds % 60;
-    return {
-      dateTime: `PT${elapsedSeconds}S`,
-      text: hours > 0 ? `${String(hours)}:${pad(minutes)}:${pad(seconds)}` : `${String(minutes)}:${pad(seconds)}`
-    };
-  }
-  if (elapsedSeconds < 60) {
-    return {
-      dateTime: `PT${elapsedSeconds}S`,
-      text: `${String(elapsedSeconds)}s`
-    };
-  }
-  const totalMinutes = Math.floor(elapsedSeconds / 60);
-  if (totalMinutes < 60) {
-    return {
-      dateTime: `PT${elapsedSeconds}S`,
-      text: `${String(totalMinutes)}m ${pad(elapsedSeconds % 60)}s`
-    };
-  }
-  const representedSeconds = totalMinutes * 60;
-  return {
-    dateTime: `PT${representedSeconds}S`,
-    text: `${String(Math.floor(totalMinutes / 60))}h ${pad(totalMinutes % 60)}m`
-  };
-}
-function getMillisecondsUntilNextChange(now, startTime, elapsedMilliseconds, format) {
-  if (now < startTime) {
-    return Math.min(startTime - now + ONE_SECOND_MS, MAX_TIMEOUT_MS);
-  }
-  const precision = format === 'elapsed' && elapsedMilliseconds >= ONE_HOUR_SECONDS * ONE_SECOND_MS ? ONE_MINUTE_MS : ONE_SECOND_MS;
-  return precision - elapsedMilliseconds % precision;
-}
-/**
- * Displays a standardized elapsed duration without scheduling React tick renders.
- *
- * Timer writes changing text and its ISO 8601 duration directly to the owned
- * `<time>` node. Use `elapsed` for compact duration text or `clock` for a
- * stopwatch-like reading.
- *
- * @example
- * ```
- * <Timer />
- * <Timer format="clock" />
- * ```
- */
-export function Timer({
-  startTime,
-  format = 'elapsed',
-  type = 'supporting',
-  size,
-  color = 'secondary',
-  weight,
-  ref,
-  xstyle,
-  className,
-  style,
-  ...rest
-}) {
-  const [mountTime] = useState(() => Date.now());
-  const timerRef = useRef(null);
-  const mergedRef = useMergedRefs(ref, timerRef);
-  const resolvedFormat = resolveFormat(format);
-  const initialPresentation = getPresentation(0, resolvedFormat);
-  useEffect(() => {
-    const resolvedStartTime = startTime !== undefined && Number.isFinite(startTime) ? startTime : mountTime;
-    let timeoutID;
-    let previousDateTime;
-    let previousText;
-    const tick = () => {
-      const now = Date.now();
-      const elapsedMilliseconds = getElapsedMilliseconds(now, resolvedStartTime);
-      const presentation = getPresentation(elapsedMilliseconds, resolvedFormat);
-      const node = timerRef.current;
-      if (node != null) {
-        if (presentation.text !== previousText) {
-          node.textContent = presentation.text;
-          previousText = presentation.text;
-        }
-        if (presentation.dateTime !== previousDateTime) {
-          node.dateTime = presentation.dateTime;
-          previousDateTime = presentation.dateTime;
-        }
-      }
-      timeoutID = setTimeout(tick, getMillisecondsUntilNextChange(now, resolvedStartTime, elapsedMilliseconds, resolvedFormat));
-    };
-    tick();
-    return () => {
-      if (timeoutID !== undefined) {
-        clearTimeout(timeoutID);
-      }
-    };
-  }, [mountTime, resolvedFormat, startTime]);
-  const timerProps = mergeProps(themeProps('timer'), {
-    className,
-    style
-  });
-  return /*#__PURE__*/_jsx(Text, {
-    type: type,
-    size: size,
-    color: color,
-    weight: weight,
-    xstyle: xstyle,
-    ...timerProps,
-    children: /*#__PURE__*/_jsx("time", {
-      ...rest,
-      ref: mergedRef,
-      dateTime: "PT0S",
-      ...{
-        className: "x1heor9g xt0psk2 xjb2p0i x1qlqyl8 x1j61x8r xss6m8b x1pd3egz x15bjb6t"
-      },
-      children: initialPresentation.text
-    })
-  });
-}
-Timer.displayName = 'Timer';