@exponential-at/ui 0.0.0-stage → 0.1.0

package/fixtures/text-direction.json

@@ -0,0 +1,309 @@
+{
+  "$comment": "AUTO-GENERATED by packages/exponential-ui/scripts/generate-round2.ts — do not edit (inputs live there). Round 2 (docs/round-2-contract.md §2). Reduce + expand `tree`, then every node's DIRECTION (its own style `direction`, else its parent's; the root's parent = the surface) and its PHYSICAL text alignment (style `textAlign`, else a Text's `align`, else `start`; start/end resolved against the node's direction): src/direction.ts. A painter hands this to text layout (the Rust core's Visual carries the resolved align; the bidi paragraph direction = the node's direction).",
+  "cases": [
+    {
+      "name": "surface-ltr",
+      "surface": "ltr",
+      "tree": {
+        "id": "root",
+        "component": "Box",
+        "children": [
+          {
+            "id": "plain",
+            "component": "Text",
+            "props": {
+              "text": "Hello!"
+            }
+          },
+          {
+            "id": "end",
+            "component": "Text",
+            "props": {
+              "text": "Total",
+              "align": "end"
+            }
+          },
+          {
+            "id": "center",
+            "component": "Text",
+            "props": {
+              "text": "Mid",
+              "align": "center"
+            }
+          },
+          {
+            "id": "style-wins",
+            "component": "Text",
+            "props": {
+              "text": "x",
+              "align": "start"
+            },
+            "style": {
+              "textAlign": "end"
+            }
+          },
+          {
+            "id": "physical",
+            "component": "Text",
+            "props": {
+              "text": "x"
+            },
+            "style": {
+              "textAlign": "left"
+            }
+          },
+          {
+            "id": "rtl-box",
+            "component": "Box",
+            "style": {
+              "direction": "rtl"
+            },
+            "children": [
+              {
+                "id": "rtl-plain",
+                "component": "Text",
+                "props": {
+                  "text": "مرحبا"
+                }
+              },
+              {
+                "id": "rtl-end",
+                "component": "Text",
+                "props": {
+                  "text": "x",
+                  "align": "end"
+                }
+              },
+              {
+                "id": "ltr-island",
+                "component": "Box",
+                "style": {
+                  "direction": "ltr"
+                },
+                "children": [
+                  {
+                    "id": "island-text",
+                    "component": "Text",
+                    "props": {
+                      "text": "code()"
+                    }
+                  }
+                ]
+              },
+              {
+                "id": "rtl-heading",
+                "component": "Heading",
+                "props": {
+                  "text": "عنوان",
+                  "level": "h2"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      "expected": {
+        "root": {
+          "direction": "ltr",
+          "textAlign": "left"
+        },
+        "plain": {
+          "direction": "ltr",
+          "textAlign": "left"
+        },
+        "end": {
+          "direction": "ltr",
+          "textAlign": "right"
+        },
+        "center": {
+          "direction": "ltr",
+          "textAlign": "center"
+        },
+        "style-wins": {
+          "direction": "ltr",
+          "textAlign": "right"
+        },
+        "physical": {
+          "direction": "ltr",
+          "textAlign": "left"
+        },
+        "rtl-box": {
+          "direction": "rtl",
+          "textAlign": "right"
+        },
+        "rtl-plain": {
+          "direction": "rtl",
+          "textAlign": "right"
+        },
+        "rtl-end": {
+          "direction": "rtl",
+          "textAlign": "left"
+        },
+        "ltr-island": {
+          "direction": "ltr",
+          "textAlign": "left"
+        },
+        "island-text": {
+          "direction": "ltr",
+          "textAlign": "left"
+        },
+        "rtl-heading": {
+          "direction": "rtl",
+          "textAlign": "right"
+        }
+      }
+    },
+    {
+      "name": "surface-rtl",
+      "surface": "rtl",
+      "tree": {
+        "id": "root",
+        "component": "Box",
+        "children": [
+          {
+            "id": "plain",
+            "component": "Text",
+            "props": {
+              "text": "Hello!"
+            }
+          },
+          {
+            "id": "end",
+            "component": "Text",
+            "props": {
+              "text": "Total",
+              "align": "end"
+            }
+          },
+          {
+            "id": "center",
+            "component": "Text",
+            "props": {
+              "text": "Mid",
+              "align": "center"
+            }
+          },
+          {
+            "id": "style-wins",
+            "component": "Text",
+            "props": {
+              "text": "x",
+              "align": "start"
+            },
+            "style": {
+              "textAlign": "end"
+            }
+          },
+          {
+            "id": "physical",
+            "component": "Text",
+            "props": {
+              "text": "x"
+            },
+            "style": {
+              "textAlign": "left"
+            }
+          },
+          {
+            "id": "rtl-box",
+            "component": "Box",
+            "style": {
+              "direction": "rtl"
+            },
+            "children": [
+              {
+                "id": "rtl-plain",
+                "component": "Text",
+                "props": {
+                  "text": "مرحبا"
+                }
+              },
+              {
+                "id": "rtl-end",
+                "component": "Text",
+                "props": {
+                  "text": "x",
+                  "align": "end"
+                }
+              },
+              {
+                "id": "ltr-island",
+                "component": "Box",
+                "style": {
+                  "direction": "ltr"
+                },
+                "children": [
+                  {
+                    "id": "island-text",
+                    "component": "Text",
+                    "props": {
+                      "text": "code()"
+                    }
+                  }
+                ]
+              },
+              {
+                "id": "rtl-heading",
+                "component": "Heading",
+                "props": {
+                  "text": "عنوان",
+                  "level": "h2"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      "expected": {
+        "root": {
+          "direction": "rtl",
+          "textAlign": "right"
+        },
+        "plain": {
+          "direction": "rtl",
+          "textAlign": "right"
+        },
+        "end": {
+          "direction": "rtl",
+          "textAlign": "left"
+        },
+        "center": {
+          "direction": "rtl",
+          "textAlign": "center"
+        },
+        "style-wins": {
+          "direction": "rtl",
+          "textAlign": "left"
+        },
+        "physical": {
+          "direction": "rtl",
+          "textAlign": "left"
+        },
+        "rtl-box": {
+          "direction": "rtl",
+          "textAlign": "right"
+        },
+        "rtl-plain": {
+          "direction": "rtl",
+          "textAlign": "right"
+        },
+        "rtl-end": {
+          "direction": "rtl",
+          "textAlign": "left"
+        },
+        "ltr-island": {
+          "direction": "ltr",
+          "textAlign": "left"
+        },
+        "island-text": {
+          "direction": "ltr",
+          "textAlign": "left"
+        },
+        "rtl-heading": {
+          "direction": "rtl",
+          "textAlign": "right"
+        }
+      }
+    }
+  ]
+}

package/fixtures/text-shimmer.json

@@ -0,0 +1,96 @@
+{
+  "$comment": "EXP-1324: the Text `shimmer` colours (catalog/style.json `textShimmer`). Inputs hand-written (colour, dark); `expected` = src/text-shimmer.ts textShimmer. The Rust core (`text_shimmer`) and every painter replay it.",
+  "cases": [
+    {
+      "name": "neutral dark muted-foreground",
+      "color": "#a1a1a1",
+      "dark": true,
+      "expected": {
+        "base": "#a1a1a1",
+        "highlight": "#ffffff",
+        "mid": "#cfcfcf",
+        "durationMs": 2000,
+        "angleDeg": 20,
+        "spreadPx": 60
+      }
+    },
+    {
+      "name": "neutral light muted-foreground",
+      "color": "#737373",
+      "dark": false,
+      "expected": {
+        "base": "#737373",
+        "highlight": "#73737333",
+        "mid": "#73737399",
+        "durationMs": 2000,
+        "angleDeg": 20,
+        "spreadPx": 60
+      }
+    },
+    {
+      "name": "dark foreground (lightness clamps to 1)",
+      "color": "#fafafa",
+      "dark": true,
+      "expected": {
+        "base": "#fafafa",
+        "highlight": "#ffffff",
+        "mid": "#fcfcfc",
+        "durationMs": 2000,
+        "angleDeg": 20,
+        "spreadPx": 60
+      }
+    },
+    {
+      "name": "a dark translucent colour gains alpha",
+      "color": "#ffffff80",
+      "dark": true,
+      "expected": {
+        "base": "#ffffff80",
+        "highlight": "#ffffffe6",
+        "mid": "#ffffffb3",
+        "durationMs": 2000,
+        "angleDeg": 20,
+        "spreadPx": 60
+      }
+    },
+    {
+      "name": "a dim colour lifts to the lightness floor",
+      "color": "#262626",
+      "dark": true,
+      "expected": {
+        "base": "#262626",
+        "highlight": "#bebebe",
+        "mid": "#6d6d6d",
+        "durationMs": 2000,
+        "angleDeg": 20,
+        "spreadPx": 60
+      }
+    },
+    {
+      "name": "a chromatic colour keeps its hue",
+      "color": "#ff6467",
+      "dark": true,
+      "expected": {
+        "base": "#ff6467",
+        "highlight": "#ffc7c4",
+        "mid": "#ff9594",
+        "durationMs": 2000,
+        "angleDeg": 20,
+        "spreadPx": 60
+      }
+    },
+    {
+      "name": "light destructive",
+      "color": "#e7000b",
+      "dark": false,
+      "expected": {
+        "base": "#e7000b",
+        "highlight": "#e7000b33",
+        "mid": "#e7000b99",
+        "durationMs": 2000,
+        "angleDeg": 20,
+        "spreadPx": 60
+      }
+    }
+  ]
+}