Simplify rail motion and add routing help toggle

2026-08-17 17:26:57 +03:00
parent 0a0a932057
commit dc1fd76c44
11 changed files with 91 additions and 221 deletions
@@ -139,36 +139,19 @@ test('secondary menus share one right rail and switch equal drawers as a vertica
  assert.match(disabledRulesLabel, /opacity:\s*0/);
  assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
  assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
-  assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines[\s\S]*client-rail-subscription-scan/);
+  assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines/);
  assert.match(instructions, /client-rail-book-page-position is-left[\s\S]*client-rail-book-page is-left[\s\S]*client-rail-book-page-position is-right[\s\S]*client-rail-book-page is-right[\s\S]*client-rail-book-spine/);
  assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/);
-  assert.match(diagnosticsFeature, /client-rail-diagnostics-trace[\s\S]*client-rail-diagnostics-scan[\s\S]*client-rail-diagnostics-position[\s\S]*client-rail-diagnostics-glass/);
-  assert.match(devices, /client-rail-device-monitor[\s\S]*M5 19h5\.5M7 15v4[\s\S]*client-rail-device-phone[\s\S]*client-rail-device-link[\s\S]*M19 16v3h-5\.5[\s\S]*client-rail-device-bridge[\s\S]*M10\.5 19h3[\s\S]*client-rail-device-packet[\s\S]*M7 19h12/);
+  assert.match(diagnosticsFeature, /client-rail-diagnostics-trace[\s\S]*client-rail-diagnostics-position[\s\S]*client-rail-diagnostics-glass/);
+  assert.match(devices, /client-rail-device-monitor[\s\S]*M5 19h5\.5M7 15v4[\s\S]*client-rail-device-phone[\s\S]*client-rail-device-link[\s\S]*M19 16v3h-5\.5/);
  assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-knob-position is-top[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob-position is-bottom[\s\S]*client-rail-rule-knob is-bottom/);
-  assert.match(styles, /\.client-rail-action:active:not\(:disabled\) svg \{[\s\S]*scale\(0\.94\)[\s\S]*120ms/);
  assert.match(styles, /\.client-rail-action svg \{[\s\S]*stroke-width:\s*1\.75/);
-  assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-back \{[\s\S]*translate\(1\.5px, -1px\)/);
-  assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-2px, 1px\)/);
-  assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page-position\.is-left \{[\s\S]*translateX\(-1\.25px\) rotate\(-2\.5deg\)/);
-  assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page-position\.is-right \{[\s\S]*translateX\(1\.25px\) rotate\(2\.5deg\)/);
-  assert.match(styles, /@keyframes client-rail-book-turn[\s\S]*scaleX\(0\.18\)[\s\S]*scaleX\(0\.55\)/);
-  assert.doesNotMatch(styles, /client-rail-info|stroke-dasharray:\s*0\.9 0\.1/);
-  assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-link \{[\s\S]*opacity:\s*1/);
-  assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/);
-  assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-position \{[\s\S]*translate\(2px, -1px\) rotate\(-7deg\)/);
-  assert.match(styles, /@keyframes client-rail-glass-scan[\s\S]*translateX\(-3px\) rotate\(6deg\)[\s\S]*translateX\(1\.5px\) rotate\(-3deg\)/);
  assert.match(routing, /client-rail-rule-knob is-top" cx="15"[\s\S]*client-rail-rule-knob is-bottom" cx="9"/);
-  assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob-position\.is-top \{[\s\S]*translateX\(4px\)/);
-  assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob-position\.is-bottom \{[\s\S]*translateX\(-4px\)/);
-  assert.match(styles, /@keyframes client-rail-rule-tune-top[\s\S]*translateX\(-2px\)/);
-  assert.match(styles, /@keyframes client-rail-rule-tune-bottom[\s\S]*translateX\(2px\)/);
-  assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-scan,[\s\S]*\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-scan \{[\s\S]*client-rail-ambient-trace 10s 1\.1s/);
-  assert.match(styles, /@keyframes client-rail-ambient-trace[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
-  assert.match(styles, /--client-rail-state-duration:\s*340ms/);
-  assert.match(styles, /\.client-rail-action\.is-open \{[\s\S]*--client-rail-state-duration:\s*480ms/);
-  assert.match(styles, /transition: transform var\(--client-rail-state-duration\) cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
-  assert.doesNotMatch(styles, /client-rail-info|client-rail-device-primary|client-rail-diagnostics-base|client-rail-rule-scan|client-rail-rule-pulse/);
-  assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
+  assert.match(rule('.client-rail-action.is-open'), /color:\s*var\(--client-accent\)/);
+  assert.doesNotMatch(`${subscription}\n${devices}\n${diagnosticsFeature}`, /client-rail-(?:subscription-scan|device-bridge|device-packet|diagnostics-scan)/);
+  assert.doesNotMatch(styles, /client-rail-(?:ambient-trace|book-turn|glass-scan|rule-tune)|--client-rail-state-duration/);
+  assert.doesNotMatch(styles, /\.client-(?:subscription|instructions|devices|diagnostics|local-rules)-toggle\.is-open [^{]+\{[^}]*(?:transform|animation)/);
+  assert.doesNotMatch(styles, /\.client-rail-action:active|\.client-rail-action:hover,[\s\S]*?transform:\s*translateX\(-3px\)/);
  assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
  assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);
  assert.match(rule('.client-drawer'), /transform:\s*translateX\(104%\)/);
@@ -271,7 +254,7 @@ test('responsive motion has a reduced-motion fallback', () => {
  assert.match(reducedMotion, /\.client-drawer/);
  assert.match(reducedMotion, /transition:\s*none/);
  assert.match(reducedMotion, /animation:\s*none/);
-  assert.match(reducedMotion, /\.client-rail-action:active:not\(:disabled\) svg[\s\S]*transform:\s*none/);
+  assert.doesNotMatch(styles, /\.client-rail-action:active:not\(:disabled\) svg/);
 });

 test('tooltips stay opaque, above adjacent content, and do not stick after pointer clicks', () => {
@@ -135,11 +135,16 @@ test('ordered rules use one accessible drag handle and a compact icon route cont
  assert.match(styles, /\.client-local-rule \+ \.client-local-rule::before[\s\S]*linear-gradient\(90deg/);
 });

-test('rule values normalize on paste and help stays collapsed above the list', () => {
+test('rule values normalize on paste and help animates both directions above the list', () => {
  assert.match(routing, /normalizeRouteRules\(\[\{ \.\.\.rule, value \}\], \{ strict: true \}\)/);
  assert.match(routing, /onPaste=\{\(event\) => \{[\s\S]*event\.preventDefault\(\)[\s\S]*normalizeDraftRuleValue\(rule, event\.clipboardData\.getData\('text'\)\)/);
  assert.match(routing, /onBlur=\{\(\) => feature\.change\(index, 'value', normalizeDraftRuleValue\(rule, rule\.value\)\)\}/);
-  assert.match(routing, /<details className="client-local-rules-help">[\s\S]*<summary>[\s\S]*Как работают правила[\s\S]*<form id="client-local-rules-form"/);
+  assert.equal((routing.match(/Проверяются сверху вниз\. Первое совпадение выбирает маршрут/g) || []).length, 0);
+  assert.equal((routing.match(/Правила проверяются сверху вниз\. Первое совпадение выбирает маршрут/g) || []).length, 1);
+  assert.match(routing, /const \[helpOpen, setHelpOpen\] = useState\(false\)[\s\S]*aria-expanded=\{helpOpen\}[\s\S]*aria-controls="client-local-rules-help-content"[\s\S]*setHelpOpen\(\(current\) => !current\)[\s\S]*Как работают правила[\s\S]*aria-hidden=\{!helpOpen\}[\s\S]*<form id="client-local-rules-form"/);
  assert.doesNotMatch(routing, /client-local-rules-note/);
-  assert.match(styles, /\.client-local-rules-help > div \{[\s\S]*background: color-mix/);
+  assert.match(styles, /\.client-local-rules-help-reveal \{[\s\S]*grid-template-rows:\s*0fr[\s\S]*opacity:\s*0[\s\S]*420ms cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
+  assert.match(styles, /\.client-local-rules-help\.is-open \.client-local-rules-help-reveal \{[\s\S]*grid-template-rows:\s*1fr[\s\S]*opacity:\s*1/);
+  assert.match(styles, /\.client-local-rules-help-content \{[\s\S]*overflow:\s*hidden/);
+  assert.match(styles, /\.client-local-rules-help-copy \{[\s\S]*background: color-mix[\s\S]*translateY\(-6px\)[\s\S]*transition:\s*transform 420ms/);
 });
@@ -37,26 +37,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
  counts: {
-    cascadeEdges: 950,
-    customProperties: 108,
-    declarations: 3516,
+    cascadeEdges: 949,
+    customProperties: 106,
+    declarations: 3474,
    important: 0,
-    keyframes: 53,
+    keyframes: 48,
    media: 13,
-    rules: 1000,
-    variableReferences: 840,
+    rules: 966,
+    variableReferences: 837,
  },
  hashes: {
-    cascadeEdges: '5d255c2f624bf3b45037c027f127d644f02dfc5a130313e766597da9bee4875f',
-    customProperties: '3b97add4c3d685a532afff5046ddbe2b6eebcc0866c62781348559897f2930fb',
-    declarations: '4cf0d3ed382d4757bf7313ea9e941167ccbb28293198e89852fda855b288f492',
+    cascadeEdges: 'a2289354130ffe83c907b977d21d773799c4435c8016e51d14f153184f834804',
+    customProperties: 'fd6f16069f9fe3526f09d4d574431ddae67150d8e7a8a40e04c9fd2d179ec7ac',
+    declarations: '6581f90631086ad0ba2ef1b3d1ec86f608e872572af5486d4c7199f06802bcfd',
    duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
    duplicateSelectors: '8982145dba05b33bf1c93b2d54cfbe76305b276ff3c657aa020144016ada5848',
-    keyframes: '78b90f6f08db3eb7c998d6be48799a1fff9179c416b6e4364c0efdeb3591e4d1',
-    ruleDeclarationSequences: '8d146a746adac504897039e31408dc342e8e9f2940c2984d69b4b21b4d6a8e3f',
-    selectors: 'fb7382b9ad1e8a7593553ce7f2544647882a1089c967e30623bb48344da0b490',
-    variableReferences: '1106c0a87671667957261a7f80cdab657d7a5f0078a9feece09c1efcad4f6455',
-    witnesses: '88e71ed6ab4be07b2c7b45f90677c2f70dbc5d5b7dc8a42c8715e3f8084096dc',
+    keyframes: 'a0d69c5b3e5f235d3a76ed04bdd64f67a73fafc9c59fe2635ffda603709c0ad9',
+    ruleDeclarationSequences: 'dc793f9ea84540c87ae3650fa915efed643b941c393e8dd0fd75fcb01c543bb3',
+    selectors: 'a556fe1d9608d73332db5b3c14cd4cfde42f3346a542d3e2b2ce2af34f556c8c',
+    variableReferences: '843a5f71b0fb74691ed623dbc7ebb7ddddc34e5736e1f419f17cf54e22d43073',
+    witnesses: '10b015073632f8697ac16b5849f28029322d9164060896c366ba4d35dbb3cee5',
  },
 };

@@ -209,7 +209,7 @@ test('client typography uses the shared semantic scale outside the token owner',

 test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
  const witnesses = readStyleWitnesses(root);
-  assert.equal(witnesses.length, 863);
+  assert.equal(witnesses.length, 860);
  assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
  const ledger = createStyleLedger(readStyleSource(root), { witnesses });
  assert.deepEqual(ledger.counts, acceptedLedger.counts);
@@ -405,8 +405,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
  assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);

  const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-BlKS5cQQ.css']);
+  assert.deepEqual(assets, ['index-DUSJhcRO.css']);
  const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 136693);
-  assert.equal(sha256(built), '3486f1e09a97e1293d7cdd4c7661b994bda1f388c1560518657da1b3a8318d6e');
+  assert.equal(built.byteLength, 133278);
+  assert.equal(sha256(built), 'f3116a2f0f282a10030589057ec0c62800640b7b552180dfe12d4b737a5fc436');
 });