@astryxdesign/lab 0.7.6-canary.cdc5ec0 → 0.7.6-canary.ce052bf

package/dist/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAuF5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;IAC5D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAsB,EACtB,cAAsB,EACtB,UAAkB,EAClB,WAAW,EACX,SAAS,EACT,IAAW,EACX,SAAS,EAAE,eAAe,EAC1B,KAAK,EACL,UAAqE,EACrE,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA8UjB;yBA/Ve,UAAU"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AA2F5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;IAC5D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAsB,EACtB,cAAsB,EACtB,UAAkB,EAClB,WAAW,EACX,SAAS,EACT,IAAW,EACX,SAAS,EAAE,eAAe,EAC1B,KAAK,EACL,UAAqE,EACrE,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAsVjB;yBAvWe,UAAU"}

package/dist/CodeEditor/CodeEditor.js

@@ -35,6 +35,9 @@ const styles = {
     k1xSpc: "x78zum5",
     kaIpWk: "xh6dtrn",
     kWkggS: "xwmxj5m",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "x14i3s5s",
     kVQacm: "xb3r6kr",
     $$css: true
   },
@@ -51,6 +54,9 @@ const styles = {
     k9WMMc: "xp4054r",
     kfSwDN: "x87ps6o",
     kMwMTN: "xnbbluu",
+    kWqL5O: "x1pcaw5z",
+    kSWEuD: "x32b0ac",
+    k26BEO: "xtgwc6q",
     $$css: true
   },
   editor: {
@@ -450,6 +456,7 @@ export function CodeEditor({
     }), stylex.props(styles.root, focused && styles.rootFocused, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
+      dir: "ltr",
       ...{
         className: "x78zum5 x98rzlu xysyzu8"
       },
@@ -468,7 +475,12 @@ export function CodeEditor({
           position: 'relative',
           flex: 1
         },
-        children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
+        children: [showPlaceholder &&
+        /*#__PURE__*/
+        // The placeholder is prose, not code: it takes its own text's
+        // direction, so an Arabic or Hebrew hint still reads correctly.
+        _jsx("div", {
+          dir: "auto",
           ...stylex.props(styles.placeholder, sizeStyle),
           children: placeholder
         }), /*#__PURE__*/_jsx("code", {

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;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"}
+{"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;AAq2BD;;;;;;;;;;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

@@ -524,6 +524,7 @@ const styles = {
     khDVqt: "x126k92a",
     kTgw9: "x1lldw8n",
     kHjlTd: "xj0a0fe",
+    "--_astryx-text-overflow-wrap": "x5ujdhh",
     $$css: true
   },
   added: {
@@ -966,7 +967,7 @@ export function DiffViewer({
                 },
                 children: /*#__PURE__*/_jsx("div", {
                   ...{
-                    className: "x1q06l6i xj0a0fe x41o525"
+                    className: "x1q06l6i xj0a0fe x5ujdhh x41o525"
                   },
                   children: note
                 })
@@ -1065,7 +1066,7 @@ export function DiffViewer({
                   className: "xu0wf1k xrrkdod x1yc453h x11ds9ch xt5rlkq x1sdyfia xszpfcc xykt701 xgtxpae x1osaytk"
                 },
                 1: {
-                  className: "xu0wf1k xrrkdod x1yc453h x11ds9ch xt5rlkq xszpfcc xykt701 xgtxpae x1osaytk x126k92a x1lldw8n xj0a0fe"
+                  className: "xu0wf1k xrrkdod x1yc453h x11ds9ch xt5rlkq xszpfcc xykt701 xgtxpae x1osaytk x126k92a x1lldw8n xj0a0fe x5ujdhh"
                 }
               }[!!isWrapped << 0],
               children: isOld ? renderHunkText(row.header) : /*#__PURE__*/_jsxs(_Fragment, {
@@ -1109,7 +1110,7 @@ export function DiffViewer({
               },
               children: note != null && /*#__PURE__*/_jsx("div", {
                 ...{
-                  className: "x1q06l6i xj0a0fe x41o525"
+                  className: "x1q06l6i xj0a0fe x5ujdhh x41o525"
                 },
                 children: note
               })

package/dist/LogStream/LogStream.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AAsOD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAmB,EACnB,WAAW,EACX,cAAc,EACd,SAAS,EACT,aAAoB,EACpB,KAAoB,EACpB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqNhB;yBAnOe,SAAS"}
+{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AAwOD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAmB,EACnB,WAAW,EACX,cAAc,EACd,SAAS,EACT,aAAoB,EACpB,KAAoB,EACpB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqNhB;yBAnOe,SAAS"}

package/dist/LogStream/LogStream.js

@@ -364,28 +364,28 @@ export function LogStream({
       }), /*#__PURE__*/_jsx("span", {
         ...{
           0: {
-            className: "xeuugli xj0a0fe x126k92a"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a"
           },
           4: {
-            className: "xeuugli xj0a0fe x126k92a x45uw2j"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a x45uw2j"
           },
           2: {
-            className: "xeuugli xj0a0fe x126k92a xbz8ry5"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a xbz8ry5"
           },
           6: {
-            className: "xeuugli xj0a0fe x126k92a xbz8ry5"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a xbz8ry5"
           },
           1: {
-            className: "xeuugli xj0a0fe x126k92a x1gnejgv"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a x1gnejgv"
           },
           5: {
-            className: "xeuugli xj0a0fe x126k92a x1gnejgv"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a x1gnejgv"
           },
           3: {
-            className: "xeuugli xj0a0fe x126k92a x1gnejgv"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a x1gnejgv"
           },
           7: {
-            className: "xeuugli xj0a0fe x126k92a x1gnejgv"
+            className: "xeuugli xj0a0fe x5ujdhh x126k92a x1gnejgv"
           }
         }[!!isTerminal << 2 | !!(isTerminal && entry.level === 'error') << 1 | !!(isTerminal && entry.level === 'warn') << 0],
         children: entry.message

package/dist/lab.css

@@ -30,6 +30,7 @@
   @keyframes x17t2jll-B{0%{transform:translateY(0);opacity:.35;}30%{transform:translateY(-3px);opacity:1;}60%{transform:translateY(0);opacity:.35;}100%{transform:translateY(0);opacity:.35;}}
   :root, .x1ucsbpz{--icon-layer-primary-fill:none;--icon-layer-primary-stroke:currentColor;--icon-layer-primary-opacity:1;--icon-layer-primary-stroke-role-fill:none;--icon-layer-primary-stroke-role-stroke:currentColor;--icon-layer-primary-stroke-role-opacity:1;--icon-layer-primary-stroke-role-width:1.5;--icon-layer-secondary-fill:none;--icon-layer-secondary-stroke:currentColor;--icon-layer-secondary-opacity:1;--icon-layer-secondary-stroke-role-fill:none;--icon-layer-secondary-stroke-role-stroke:currentColor;--icon-layer-secondary-stroke-role-opacity:1;--icon-layer-secondary-stroke-role-width:1.5;--icon-size:24px;--icon-stroke-width:1.5;--icon-stroke-linecap:round;--icon-stroke-linejoin:round;--icon-padding:0px;--icon-inline-offset:0px;--icon-block-offset:0px;--icon-bold-stroke-boost:0.5;--icon-gap:0.75;--icon-gap-linejoin:round;}
   :root, .xc6kv0w{--transfer-list-panel-min-block-size:12rem;--transfer-list-panel-max-block-size:20rem;}
+  .x5ujdhh{--_astryx-text-overflow-wrap:anywhere}
   .x1eijsz{--icon-layer-primary-fill:currentColor}
   .xawlqpt{--icon-layer-primary-fill:none}
   .xgmpc9a{--icon-layer-primary-opacity:1}
@@ -649,6 +650,9 @@
   .x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
   .x1qhh985:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
   .x92x3c3:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--border-width)}
+  .xtgwc6q:not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--color-border)}
+  .x32b0ac:not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:solid}
+  .x1pcaw5z:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:var(--border-width)}
   .x5mp61g:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--color-border-orange)}
   .x1pc3f07:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--color-border)}
   .x13fuv20:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:solid}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.6-canary.cdc5ec0",
+  "version": "0.7.6-canary.ce052bf",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.6-canary.cdc5ec0",
+    "@astryxdesign/core": "0.7.6-canary.ce052bf",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,9 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.6-canary.cdc5ec0",
-    "@astryxdesign/cli": "0.7.6-canary.cdc5ec0",
+    "@astryxdesign/a11y-spec": "0.7.6-canary.ce052bf",
+    "@astryxdesign/cli": "0.7.6-canary.ce052bf",
+    "@astryxdesign/interaction-harness": "0.7.6-canary.ce052bf",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/CircularProgress/__tests__/CircularProgressMotion.a11y.chromium.spec.ts

@@ -3,7 +3,8 @@
 /**
  * @file CircularProgressMotion.a11y.chromium.spec.ts
  * @input Built CircularProgress stories in real Chromium (Web Animations
- *   seeking, CDP screencast, tracing)
+ *   seeking, CDP screencast, tracing), the interaction harness's busy-window
+ *   control and proof
  * @output Browser evidence that a determinate value change keeps moving while
  *   a script holds the main thread and paints nothing per frame, that the
  *   ring at rest draws what the stroked circle drew, and that the arc stays
@@ -24,6 +25,14 @@ import {
   serveStorybook,
   type StaticServer,
 } from '@astryxdesign/a11y-spec/storybook';
+import {
+  busyWindowProof,
+  CONTROL_RGB,
+  inPresentationOrder,
+  startBusyControl,
+  trackMarker,
+  type TrackedFrame,
+} from '@astryxdesign/interaction-harness';
 
 let storybook: StaticServer;
 test.beforeAll(async () => {
@@ -151,35 +160,59 @@ async function colors(page: Page) {
 
 /**
  * For each degree clockwise from 12 o'clock, whether the ring's centerline is
- * drawn in the fill color in the given screenshot (PNGs of the ring box).
+ * drawn in the fill color in the given screenshot: PNGs of the ring box, or,
+ * with `frame`, PNGs of the whole viewport (`viewportWidth` CSS px wide) read
+ * at the ring box, the same pixels a crop to that box would hold.
  */
 async function inkByDegree(
   page: Page,
   shots: string[],
   palette: {fill: number[]; track: number[]},
+  frame?: {ring: Box; viewportWidth: number},
 ): Promise<boolean[][]> {
   const scratch = await page.context().newPage();
   try {
     return await scratch.evaluate(
-      async ({items, fill, track, diameter, stroke}) => {
+      async ({items, fill, track, diameter, stroke, region}) => {
         const out: boolean[][] = [];
         for (const item of items) {
           const bitmap = await createImageBitmap(
             await (await fetch(`data:image/png;base64,${item}`)).blob(),
           );
-          const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+          // The ring box in the shot's pixels: the whole shot, or the box's
+          // pixels in a viewport frame.
+          const frameScale =
+            region == null ? 1 : bitmap.width / region.viewportWidth;
+          const x0 =
+            region == null ? 0 : Math.round(region.ring.x * frameScale);
+          const y0 =
+            region == null ? 0 : Math.round(region.ring.y * frameScale);
+          const boxWidth =
+            region == null
+              ? bitmap.width
+              : Math.round(region.ring.width * frameScale);
+          const boxHeight =
+            region == null
+              ? bitmap.height
+              : Math.round(region.ring.height * frameScale);
+          const canvas = new OffscreenCanvas(boxWidth, boxHeight);
           const context = canvas.getContext('2d');
           if (context == null) {
             throw new Error('no 2d context');
           }
-          context.drawImage(bitmap, 0, 0);
-          const {data, width} = context.getImageData(
+          context.drawImage(
+            bitmap,
+            x0,
+            y0,
+            boxWidth,
+            boxHeight,
             0,
             0,
-            bitmap.width,
-            bitmap.height,
+            boxWidth,
+            boxHeight,
           );
-          const scale = bitmap.width / diameter;
+          const {data, width} = context.getImageData(0, 0, boxWidth, boxHeight);
+          const scale = boxWidth / diameter;
           const r = ((diameter - stroke) / 2) * scale;
           const c = (diameter / 2) * scale;
           const d = (a: number[], b: number[]) =>
@@ -199,7 +232,13 @@ async function inkByDegree(
         }
         return out;
       },
-      {items: shots, ...palette, diameter: DIAMETER, stroke: STROKE},
+      {
+        items: shots,
+        ...palette,
+        diameter: DIAMETER,
+        stroke: STROKE,
+        region: frame ?? null,
+      },
     );
   } finally {
     await scratch.close();
@@ -262,6 +301,10 @@ test('a value change keeps moving while a script holds the main thread', async (
     everyNthFrame: 1,
   });
   await page.waitForTimeout(300);
+  // The harness's busy-window control, through the block: a box the
+  // compositor moves along the top edge, clear of the ring, in the same
+  // screencast.
+  const control = await startBusyControl(page);
   // A value change, one presented frame, then 700 ms of script.
   const busy = await page.evaluate(
     async ({storyId}) =>
@@ -297,67 +340,68 @@ test('a value change keeps moving while a script holds the main thread', async (
       }),
     {storyId: STORY},
   );
+  // Gone once the block ends, so the page is still again when the
+  // screencast stops.
+  await control.remove();
   await page.waitForTimeout(300);
   await cdp.send('Page.stopScreencast');
   await Promise.all(acks);
   await cdp.detach();
   // A lost acknowledgement stalls the screencast and thins the frames.
   expect(ackFailures).toEqual([]);
-  // Crop each frame to the ring, then read how far the arc reaches.
-  const scratch = await page.context().newPage();
-  let crops: string[];
-  try {
-    crops = await scratch.evaluate(
-      async ({items, ring}) => {
-        const out: string[] = [];
-        for (const item of items) {
-          const bitmap = await createImageBitmap(
-            await (await fetch(`data:image/png;base64,${item}`)).blob(),
-          );
-          const scale = bitmap.width / 240;
-          const canvas = new OffscreenCanvas(
-            Math.round(ring.width * scale),
-            Math.round(ring.height * scale),
-          );
-          const context = canvas.getContext('2d');
-          if (context == null) {
-            throw new Error('no 2d context');
-          }
-          context.drawImage(
-            bitmap,
-            Math.round(ring.x * scale),
-            Math.round(ring.y * scale),
-            canvas.width,
-            canvas.height,
-            0,
-            0,
-            canvas.width,
-            canvas.height,
-          );
-          const blob = await canvas.convertToBlob({type: 'image/png'});
-          const bytes = new Uint8Array(await blob.arrayBuffer());
-          let binary = '';
-          for (const byte of bytes) {
-            binary += String.fromCharCode(byte);
-          }
-          out.push(btoa(binary));
-        }
-        return out;
-      },
-      {items: raw.map(f => f.data), ring: box},
-    );
-  } finally {
-    await scratch.close();
-  }
-  const rows = await inkByDegree(page, crops, palette);
-  const frames = rows.map((row, i) => ({t: raw[i].t, ...span(row)}));
+  // Chromium encodes each frame off its main thread and can send a slow one
+  // after the next: frames go by the swap timestamp each one carries. A frame
+  // that shows the arc behind an earlier one still has its own later
+  // timestamp, so it stays in place.
+  const presented = inPresentationOrder(raw);
+  // How far the arc reaches in each frame, read at the ring.
+  const rows = await inkByDegree(
+    page,
+    presented.map(f => f.data),
+    palette,
+    {ring: box, viewportWidth: 240},
+  );
+  const frames = rows.map((row, i) => ({t: presented[i].t, ...span(row)}));
   const inside = frames.filter(
     f => f.t >= busy.from + 20 && f.t <= busy.to - 20,
   );
-  // The change lasts the theme's 410 ms, so it moves through most of the
-  // block, one piece the whole way, and lands at 90%.
-  const reaches = new Set(inside.map(f => f.last));
-  expect(reaches.size).toBeGreaterThanOrEqual(10);
+  // The control, in the frames around the block (the proof reads it from the
+  // last frame before the block through the block's end).
+  const controlFrames = await trackMarker(
+    page,
+    presented
+      .filter(f => f.t >= busy.from - 250 && f.t <= busy.to)
+      .map(f => ({
+        t: f.t,
+        data: f.data,
+        format: 'png' as const,
+        viewportWidth: 240,
+        viewportHeight: 160,
+      })),
+    {rgb: CONTROL_RGB},
+  );
+  // The change runs through the block: the arc's reach shows a new degree on
+  // every frame the control moved on, and stalls no longer than the control,
+  // until it settles (the harness's busy proof: the screencast's capture rate
+  // thins both alike). It settles 3 degrees short of its end: on the change's
+  // own clock each 1-degree step of the reading takes 2 to 8 ms up to 324,
+  // then 12, 12 and 18 ms for 325, 326 and 327 before it rests at 328, so
+  // from 325 two frames can read the same degree while the arc still moves.
+  // It stays one piece the whole way, and lands at 90%.
+  const arc: TrackedFrame[] = frames.map(f => ({
+    t: f.t,
+    box: {x: f.last, y: 0, width: 1, height: 1},
+    pixels: 1,
+  }));
+  const proof = busyWindowProof(arc, busy, {
+    axis: 'x',
+    settledWithin: 3,
+    control: controlFrames,
+  });
+  test
+    .info()
+    .annotations.push({type: 'busy window', description: proof.summary});
+  expect(proof.verdict.failures, proof.summary).toEqual([]);
   for (const frame of inside) {
     expect(frame.pieces, `pieces at ${frame.t}`).toBe(1);
   }

package/src/CodeEditor/CodeEditor.test.tsx

@@ -51,6 +51,33 @@ function renderEditor(value = '', props: {escapeHint?: string} = {}) {
 }
 
 describe('CodeEditor', () => {
+  it('keeps the code left-to-right inside a right-to-left page', () => {
+    render(
+      <div dir="rtl">
+        <CodeEditor label="Code" value="const a = 1;" onChange={() => {}} />
+      </div>,
+    );
+    const editor = screen.getByRole('textbox', {name: 'Code'});
+    expect(editor.closest('[dir]')).toHaveAttribute('dir', 'ltr');
+  });
+
+  it('lets the placeholder take its own text direction', () => {
+    render(
+      <div dir="rtl">
+        <CodeEditor
+          label="Code"
+          value=""
+          onChange={() => {}}
+          placeholder="اكتب الكود هنا..."
+        />
+      </div>,
+    );
+    expect(screen.getByText('اكتب الكود هنا...')).toHaveAttribute(
+      'dir',
+      'auto',
+    );
+  });
+
   it('uses the label prop as the accessible name', () => {
     render(
       <CodeEditor

package/src/CodeEditor/CodeEditor.tsx

@@ -58,7 +58,9 @@ const styles = stylex.create({
     display: 'flex',
     borderRadius: radiusVars['--radius-element'],
     backgroundColor: colorVars['--color-background-muted'],
-    border: `${borderVars['--border-width']} solid ${colorVars['--color-border']}`,
+    borderWidth: borderVars['--border-width'],
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
     overflow: 'hidden',
   },
   rootFocused: {
@@ -73,7 +75,9 @@ const styles = stylex.create({
     textAlign: 'end',
     userSelect: 'none',
     color: colorVars['--color-text-disabled'],
-    borderRight: `${borderVars['--border-width']} solid ${colorVars['--color-border']}`,
+    borderRightWidth: borderVars['--border-width'],
+    borderRightStyle: 'solid',
+    borderRightColor: colorVars['--color-border'],
   },
   gutterLine: {
     fontFamily: typographyVars['--font-family-code'],
@@ -556,7 +560,13 @@ export function CodeEditor({
         style,
       )}
       {...props}>
-      <div {...stylex.props(styles.editorContainer)} style={containerStyle}>
+      {/* Code, with its line numbers, keeps its own left-to-right direction
+          inside a right-to-left page (design:bidirectionality DR2): lines read
+          and indent correctly, and a long line scrolls from its start. */}
+      <div
+        dir="ltr"
+        {...stylex.props(styles.editorContainer)}
+        style={containerStyle}>
         {hasLineNumbers && (
           <div
             {...stylex.props(styles.gutter, gutterSizeStyle)}
@@ -570,7 +580,9 @@ export function CodeEditor({
         )}
         <div style={{position: 'relative', flex: 1}}>
           {showPlaceholder && (
-            <div {...stylex.props(styles.placeholder, sizeStyle)}>
+            // The placeholder is prose, not code: it takes its own text's
+            // direction, so an Arabic or Hebrew hint still reads correctly.
+            <div dir="auto" {...stylex.props(styles.placeholder, sizeStyle)}>
               {placeholder}
             </div>
           )}

package/src/DiffViewer/DiffViewer.tsx

@@ -822,6 +822,8 @@ const styles = stylex.create({
     whiteSpace: 'pre-wrap',
     wordBreak: 'normal',
     overflowWrap: 'anywhere',
+    // Text inside keeps `anywhere` too (Text FR3).
+    '--_astryx-text-overflow-wrap': 'anywhere',
   },
   // Row tints are a background-image layer so a pinned (sticky) cell can lay
   // them over an opaque syntax background.
@@ -960,6 +962,8 @@ const annotationStyles = stylex.create({
   content: {
     direction: {default: null, ':is([dir="rtl"] *)': 'rtl'},
     overflowWrap: 'anywhere',
+    // Text inside keeps `anywhere` too (Text FR3).
+    '--_astryx-text-overflow-wrap': 'anywhere',
     contain: 'inline-size',
   },
 });

package/src/LogStream/LogStream.tsx

@@ -257,6 +257,8 @@ const styles = stylex.create({
   message: {
     minWidth: 0,
     overflowWrap: 'anywhere',
+    // Text inside keeps `anywhere` too (Text FR3).
+    '--_astryx-text-overflow-wrap': 'anywhere',
     whiteSpace: 'pre-wrap',
   },
   messageTerminal: {