@huaweidevtools/aishell-dsh-brand 0.0.5 → 0.0.6

package/lib/client.js

@@ -26,6 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
 const react = __toESM(require("react"));
+const react_dom = __toESM(require("react-dom"));
 
 //#region \0dsh-css:/home/eushing/opensource/aishell-dsh-plugins/packages/aishell-brand/src/client/brand.module.css.mjs
 const css = ".NP1U9q_mark{background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI0NC4wMDAwMDAiIGhlaWdodD0iNDQuMDAwMDAwIiBmaWxsPSJub25lIj4KCTxkZWZzPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnRfbGluZWFyXzAiIHgxPSIzOC41IiB4Mj0iMi4xOTk5OTY5NSIgeTE9IjEuOTA3MzQ4NjNlLTA2IiB5Mj0iMzkuNTk5OTkwOCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgoJCQk8c3RvcCBzdG9wLWNvbG9yPSJyZ2IoNTMsMTM3LDI1NSkiIG9mZnNldD0iMCIgc3RvcC1vcGFjaXR5PSIxIiAvPgoJCQk8c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMTY5LDM4LDI1NSkiIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIxIiAvPgoJCTwvbGluZWFyR3JhZGllbnQ+Cgk8L2RlZnM+Cgk8cmVjdCBpZD0iaWNvbl9BSVNoZWxsIiB3aWR0aD0iNDQuMDAwMDAwIiBoZWlnaHQ9IjQ0LjAwMDAwMCIgeD0iMC4wMDAwMDAiIHk9IjAuMDAwMDAwIiBmaWxsPSJyZ2IoMjU1LDI1NSwyNTUpIiBmaWxsLW9wYWNpdHk9IjAiIC8+Cgk8cGF0aCBpZD0i5ZCI5bm2IiBkPSJNMzcuNDU3NiAwLjI5OTczOEMzNy4zNzc1IDAuMTM5ODc3IDM3LjI4NjEgMC4wNDI4MTk2IDM3LjE4MzIgMC4wMDg1NjM5M0MzNy4wOTE3IC0wLjAxNDI3MzIgMzcuMDA2IDAuMDA4NTYzOTQgMzYuOTI1OSAwLjA3NzA3NTRDMzYuODQ1OSAwLjE0NTU4NyAzNi43ODg3IDAuMjE5ODA4IDM2Ljc1NDUgMC4yOTk3MzhDMzYuNDU3MiAxLjg2NDA4IDM1LjczNjkgMy4yMTcxOCAzNC41OTM3IDQuMzU5MDRDMzMuNDYxOCA1LjQ4OTQ4IDMyLjA5NTYgNi4yMjAyNyAzMC40OTUgNi41NTE0MUMzMC4zOTIxIDYuNTc0MjQgMzAuMzE3OCA2LjY0Mjc1IDMwLjI3MiA2Ljc1Njk0QzMwLjIzNzcgNi44NzExMyAzMC4yNDM1IDYuOTczODkgMzAuMjg5MiA3LjA2NTI0QzMwLjM0NjQgNy4xNTY1OSAzMC40MTUgNy4yMDIyNiAzMC40OTUgNy4yMDIyNkMzMS4yMDc4IDcuMzUyOTYgMzEuODc3OSA3LjU4NzU5IDMyLjUwNTUgNy45MDYxOEwzMi41MDU1IDcuOTA2MkwzMi41MDU2IDcuOTA2MjNDMzMuMjU3IDguMjg3NzEgMzMuOTQ3MyA4Ljc4OTU1IDM0LjU3NjUgOS40MTE3NkMzNS43MzEyIDEwLjU0MjIgMzYuNDU3MiAxMS44ODk2IDM2Ljc1NDUgMTMuNDUzOUMzNi44MTE2IDEzLjU5MSAzNi44OTc0IDEzLjY4MjMgMzcuMDExNyAxMy43MjhDMzcuMTE0NiAxMy43NjIyIDM3LjIwNjEgMTMuNzU2NSAzNy4yODYxIDEzLjcxMDlDMzcuMzc3NSAxMy42NTM4IDM3LjQzNDcgMTMuNTY4MSAzNy40NTc2IDEzLjQ1MzlDMzcuNzg5MSAxMS44ODk2IDM4LjUxNTEgMTAuNTQyMiAzOS42MzU1IDkuNDExNzZDNDAuNzY3NCA4LjI2OTkgNDIuMTI3OSA3LjUzMzQgNDMuNzE3IDcuMjAyMjZDNDMuODE5OSA3LjE3OTQzIDQzLjkgNy4xMjIzMyA0My45NTcxIDcuMDMwOTlDNDQuMDE0MyA2LjkyODIyIDQ0LjAxNDMgNi44MzExNiA0My45NTcxIDYuNzM5ODFDNDMuOSA2LjYzNzA1IDQzLjgxOTkgNi41NzQyNCA0My43MTcgNi41NTE0MUM0Mi4xNTA3IDYuMjIwMjcgNDAuNzk1OSA1LjQ4OTQ4IDM5LjY1MjcgNC4zNTkwNEMzOC41MjA4IDMuMjE3MTggMzcuNzg5MSAxLjg2NDA4IDM3LjQ1NzYgMC4yOTk3MzhaTTQyLjYyNSAxNi40OTk5TDQyLjYyNSAzM0M0Mi42MjUgMzMuOTQ5MyA0Mi40NTcyIDM0LjgyOSA0Mi4xMjE2IDM1LjYzOTJDNDEuNzg2IDM2LjQ0OTUgNDEuMjgyNiAzNy4xOTAyIDQwLjYxMTQgMzcuODYxNEMzOS45NDAyIDM4LjUzMjYgMzkuMTk5NCAzOS4wMzYgMzguMzg5MiAzOS4zNzE2QzM3LjU3OSAzOS43MDcyIDM2LjY5OTIgMzkuODc1IDM1Ljc1IDM5Ljg3NUwxMC45OTk5IDM5Ljg3NUw4LjI0OTk1IDM5Ljg3NUM3LjMwMDczIDM5Ljg3NSA2LjQyMTAyIDM5LjcwNzIgNS42MTA4MSAzOS4zNzE2QzQuODAwNTggMzkuMDM2IDQuMDU5ODUgMzguNTMyNiAzLjM4ODYzIDM3Ljg2MTRDMi43MTc0MiAzNy4xOTAyIDIuMjE0MDIgMzYuNDQ5NCAxLjg3ODQxIDM1LjYzOTJDMS41NDI4IDM0LjgyOSAxLjM3NSAzMy45NDkzIDEuMzc1IDMzTDEuMzc1IDExQzEuMzc1IDEwLjA1MDggMS41NDI4IDkuMTcxMDYgMS44Nzg0IDguMzYwODNMMS44Nzg0MSA4LjM2MDgyQzIuMjE0MDIgNy41NTA1OSAyLjcxNzQzIDYuODA5ODcgMy4zODg2NCA2LjEzODY2QzQuMDU5ODUgNS40Njc0NSA0LjgwMDU3IDQuOTY0MDQgNS42MTA3OSA0LjYyODQzTDUuNjEwOCA0LjYyODQzQzYuNDIxMDMgNC4yOTI4MiA3LjMwMDc2IDQuMTI1MDIgOC4yNSA0LjEyNTAyTDI3LjQ5OTkgNC4xMjVDMjguMjY5OSA0LjEyNSAyOC44NzQ5IDQuNzMgMjguODc0OSA1LjVDMjguODc0OSA2LjI3IDI4LjI2OTkgNi44NzUgMjcuNDk5OSA2Ljg3NUw4LjI1IDYuODc1MDJDNy42ODA0NSA2Ljg3NTAyIDcuMTUyNjEgNi45NzU3IDYuNjY2NDggNy4xNzcwNkM2LjE4MDM0IDcuMzc4NDMgNS43MzU5MSA3LjY4MDQ3IDUuMzMzMTggOC4wODMyQzQuOTMwNDYgOC40ODU5MyA0LjYyODQxIDguOTMwMzYgNC40MjcwNSA5LjQxNjQ5QzQuMjI1NjggOS45MDI2MyA0LjEyNSAxMC40MzA1IDQuMTI1IDExTDQuMTI1IDMzQzQuMTI1IDMzLjU2OTYgNC4yMjU2OCAzNC4wOTc0IDQuNDI3MDUgMzQuNTgzNUM0LjYyODQxIDM1LjA2OTcgNC45MzA0NSAzNS41MTQxIDUuMzMzMTcgMzUuOTE2OEM1LjczNTg4IDM2LjMxOTUgNi4xODAyOCAzNi42MjE2IDYuNjY2MzkgMzYuODIyOUM3LjE1MjU2IDM3LjAyNDMgNy42ODA0MiAzNy4xMjUgOC4yNDk5OSAzNy4xMjVMMTAuOTk5OSAzNy4xMjVMMzUuNzUgMzcuMTI1QzM2LjMxOTUgMzcuMTI1IDM2Ljg0NzQgMzcuMDI0MyAzNy4zMzM1IDM2LjgyM0MzNy44MTk3IDM2LjYyMTYgMzguMjY0MSAzNi4zMTk2IDM4LjY2NjggMzUuOTE2OEMzOS4wNjk1IDM1LjUxNDEgMzkuMzcxNiAzNS4wNjk3IDM5LjU3MyAzNC41ODM1QzM5Ljc3NDMgMzQuMDk3NCAzOS44NzUgMzMuNTY5NiAzOS44NzUgMzNMMzkuODc1IDE2LjQ5OTlDMzkuODc1IDE1LjcyOTkgNDAuNDggMTUuMTI0OSA0MS4yNSAxNS4xMjQ5QzQyLjAyIDE1LjEyNDkgNDIuNjI1IDE1LjcyOTkgNDIuNjI1IDE2LjQ5OTlaTTEwLjAyNzcgMTIuNzc3N0MxMC41NzIyIDEyLjIzMzMgMTEuNDI3OCAxMi4yMzMzIDExLjk3MjMgMTIuNzc3N0wyMC4yMjIyIDIxLjAyNzdDMjAuNDkwNyAyMS4yOTYyIDIwLjYyNDkgMjEuNjIwMyAyMC42MjQ5IDIyQzIwLjYyNDkgMjIuMzc5NyAyMC40OTA3IDIyLjcwMzcgMjAuMjIyMiAyMi45NzIyTDExLjk3MjIgMzEuMjIyM0MxMS40Mjc3IDMxLjc2NjggMTAuNTcyMSAzMS43NjY4IDEwLjAyNzcgMzEuMjIyM0M5LjQ4MzE4IDMwLjY3NzkgOS40ODMxNyAyOS44MjIzIDEwLjAyNzYgMjkuMjc3OEwxNy4zMDU0IDIyTDEwLjAyNzcgMTQuNzIyM0M5LjQ4MzI1IDE0LjE3NzggOS40ODMyNiAxMy4zMjIyIDEwLjAyNzcgMTIuNzc3N1pNMjAuNjI1IDI4Ljg3NUMyMC42MjUgMjguMTA1IDIxLjIzIDI3LjUgMjIgMjcuNUwzMyAyNy41QzMzLjc3IDI3LjUgMzQuMzc1IDI4LjEwNSAzNC4zNzUgMjguODc1QzM0LjM3NSAyOS42NDUgMzMuNzcgMzAuMjUgMzMgMzAuMjVMMjIgMzAuMjVDMjEuMjMgMzAuMjUgMjAuNjI1IDI5LjY0NSAyMC42MjUgMjguODc1WiIgZmlsbD0icmdiKDAsMCwwKSIgZmlsbC1vcGFjaXR5PSIwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIC8+Cgk8cGF0aCBpZD0i5ZCI5bm2IiBkPSJNMzcuNDU3NiAwLjI5OTczOEMzNy4zNzc1IDAuMTM5ODc3IDM3LjI4NjEgMC4wNDI4MTk2IDM3LjE4MzIgMC4wMDg1NjM5M0MzNy4wOTE3IC0wLjAxNDI3MzIgMzcuMDA2IDAuMDA4NTYzOTQgMzYuOTI1OSAwLjA3NzA3NTRDMzYuODQ1OSAwLjE0NTU4NyAzNi43ODg3IDAuMjE5ODA4IDM2Ljc1NDUgMC4yOTk3MzhDMzYuNDU3MiAxLjg2NDA4IDM1LjczNjkgMy4yMTcxOCAzNC41OTM3IDQuMzU5MDRDMzMuNDYxOCA1LjQ4OTQ4IDMyLjA5NTYgNi4yMjAyNyAzMC40OTUgNi41NTE0MUMzMC4zOTIxIDYuNTc0MjQgMzAuMzE3OCA2LjY0Mjc1IDMwLjI3MiA2Ljc1Njk0QzMwLjIzNzcgNi44NzExMyAzMC4yNDM1IDYuOTczODkgMzAuMjg5MiA3LjA2NTI0QzMwLjM0NjQgNy4xNTY1OSAzMC40MTUgNy4yMDIyNiAzMC40OTUgNy4yMDIyNkMzMS4yMDc4IDcuMzUyOTYgMzEuODc3OSA3LjU4NzU5IDMyLjUwNTUgNy45MDYxOEwzMi41MDU1IDcuOTA2MkwzMi41MDU2IDcuOTA2MjNDMzMuMjU3IDguMjg3NzEgMzMuOTQ3MyA4Ljc4OTU1IDM0LjU3NjUgOS40MTE3NkMzNS43MzEyIDEwLjU0MjIgMzYuNDU3MiAxMS44ODk2IDM2Ljc1NDUgMTMuNDUzOUMzNi44MTE2IDEzLjU5MSAzNi44OTc0IDEzLjY4MjMgMzcuMDExNyAxMy43MjhDMzcuMTE0NiAxMy43NjIyIDM3LjIwNjEgMTMuNzU2NSAzNy4yODYxIDEzLjcxMDlDMzcuMzc3NSAxMy42NTM4IDM3LjQzNDcgMTMuNTY4MSAzNy40NTc2IDEzLjQ1MzlDMzcuNzg5MSAxMS44ODk2IDM4LjUxNTEgMTAuNTQyMiAzOS42MzU1IDkuNDExNzZDNDAuNzY3NCA4LjI2OTkgNDIuMTI3OSA3LjUzMzQgNDMuNzE3IDcuMjAyMjZDNDMuODE5OSA3LjE3OTQzIDQzLjkgNy4xMjIzMyA0My45NTcxIDcuMDMwOTlDNDQuMDE0MyA2LjkyODIyIDQ0LjAxNDMgNi44MzExNiA0My45NTcxIDYuNzM5ODFDNDMuOSA2LjYzNzA1IDQzLjgxOTkgNi41NzQyNCA0My43MTcgNi41NTE0MUM0Mi4xNTA3IDYuMjIwMjcgNDAuNzk1OSA1LjQ4OTQ4IDM5LjY1MjcgNC4zNTkwNEMzOC41MjA4IDMuMjE3MTggMzcuNzg5MSAxLjg2NDA4IDM3LjQ1NzYgMC4yOTk3MzhaTTQyLjYyNSAxNi40OTk5TDQyLjYyNSAzM0M0Mi42MjUgMzMuOTQ5MyA0Mi40NTcyIDM0LjgyOSA0Mi4xMjE2IDM1LjYzOTJDNDEuNzg2IDM2LjQ0OTUgNDEuMjgyNiAzNy4xOTAyIDQwLjYxMTQgMzcuODYxNEMzOS45NDAyIDM4LjUzMjYgMzkuMTk5NCAzOS4wMzYgMzguMzg5MiAzOS4zNzE2QzM3LjU3OSAzOS43MDcyIDM2LjY5OTIgMzkuODc1IDM1Ljc1IDM5Ljg3NUwxMC45OTk5IDM5Ljg3NUw4LjI0OTk1IDM5Ljg3NUM3LjMwMDczIDM5Ljg3NSA2LjQyMTAyIDM5LjcwNzIgNS42MTA4MSAzOS4zNzE2QzQuODAwNTggMzkuMDM2IDQuMDU5ODUgMzguNTMyNiAzLjM4ODYzIDM3Ljg2MTRDMi43MTc0MiAzNy4xOTAyIDIuMjE0MDIgMzYuNDQ5NCAxLjg3ODQxIDM1LjYzOTJDMS41NDI4IDM0LjgyOSAxLjM3NSAzMy45NDkzIDEuMzc1IDMzTDEuMzc1IDExQzEuMzc1IDEwLjA1MDggMS41NDI4IDkuMTcxMDYgMS44Nzg0IDguMzYwODNMMS44Nzg0MSA4LjM2MDgyQzIuMjE0MDIgNy41NTA1OSAyLjcxNzQzIDYuODA5ODcgMy4zODg2NCA2LjEzODY2QzQuMDU5ODUgNS40Njc0NSA0LjgwMDU3IDQuOTY0MDQgNS42MTA3OSA0LjYyODQzTDUuNjEwOCA0LjYyODQzQzYuNDIxMDMgNC4yOTI4MiA3LjMwMDc2IDQuMTI1MDIgOC4yNSA0LjEyNTAyTDI3LjQ5OTkgNC4xMjVDMjguMjY5OSA0LjEyNSAyOC44NzQ5IDQuNzMgMjguODc0OSA1LjVDMjguODc0OSA2LjI3IDI4LjI2OTkgNi44NzUgMjcuNDk5OSA2Ljg3NUw4LjI1IDYuODc1MDJDNy42ODA0NSA2Ljg3NTAyIDcuMTUyNjEgNi45NzU3IDYuNjY2NDggNy4xNzcwNkM2LjE4MDM0IDcuMzc4NDMgNS43MzU5MSA3LjY4MDQ3IDUuMzMzMTggOC4wODMyQzQuOTMwNDYgOC40ODU5MyA0LjYyODQxIDguOTMwMzYgNC40MjcwNSA5LjQxNjQ5QzQuMjI1NjggOS45MDI2MyA0LjEyNSAxMC40MzA1IDQuMTI1IDExTDQuMTI1IDMzQzQuMTI1IDMzLjU2OTYgNC4yMjU2OCAzNC4wOTc0IDQuNDI3MDUgMzQuNTgzNUM0LjYyODQxIDM1LjA2OTcgNC45MzA0NSAzNS41MTQxIDUuMzMzMTcgMzUuOTE2OEM1LjczNTg4IDM2LjMxOTUgNi4xODAyOCAzNi42MjE2IDYuNjY2MzkgMzYuODIyOUM3LjE1MjU2IDM3LjAyNDMgNy42ODA0MiAzNy4xMjUgOC4yNDk5OSAzNy4xMjVMMTAuOTk5OSAzNy4xMjVMMzUuNzUgMzcuMTI1QzM2LjMxOTUgMzcuMTI1IDM2Ljg0NzQgMzcuMDI0MyAzNy4zMzM1IDM2LjgyM0MzNy44MTk3IDM2LjYyMTYgMzguMjY0MSAzNi4zMTk2IDM4LjY2NjggMzUuOTE2OEMzOS4wNjk1IDM1LjUxNDEgMzkuMzcxNiAzNS4wNjk3IDM5LjU3MyAzNC41ODM1QzM5Ljc3NDMgMzQuMDk3NCAzOS44NzUgMzMuNTY5NiAzOS44NzUgMzNMMzkuODc1IDE2LjQ5OTlDMzkuODc1IDE1LjcyOTkgNDAuNDggMTUuMTI0OSA0MS4yNSAxNS4xMjQ5QzQyLjAyIDE1LjEyNDkgNDIuNjI1IDE1LjcyOTkgNDIuNjI1IDE2LjQ5OTlaTTEwLjAyNzcgMTIuNzc3N0MxMC41NzIyIDEyLjIzMzMgMTEuNDI3OCAxMi4yMzMzIDExLjk3MjMgMTIuNzc3N0wyMC4yMjIyIDIxLjAyNzdDMjAuNDkwNyAyMS4yOTYyIDIwLjYyNDkgMjEuNjIwMyAyMC42MjQ5IDIyQzIwLjYyNDkgMjIuMzc5NyAyMC40OTA3IDIyLjcwMzcgMjAuMjIyMiAyMi45NzIyTDExLjk3MjIgMzEuMjIyM0MxMS40Mjc3IDMxLjc2NjggMTAuNTcyMSAzMS43NjY4IDEwLjAyNzcgMzEuMjIyM0M5LjQ4MzE4IDMwLjY3NzkgOS40ODMxNyAyOS44MjIzIDEwLjAyNzYgMjkuMjc3OEwxNy4zMDU0IDIyTDEwLjAyNzcgMTQuNzIyM0M5LjQ4MzI1IDE0LjE3NzggOS40ODMyNiAxMy4zMjIyIDEwLjAyNzcgMTIuNzc3N1pNMjAuNjI1IDI4Ljg3NUMyMC42MjUgMjguMTA1IDIxLjIzIDI3LjUgMjIgMjcuNUwzMyAyNy41QzMzLjc3IDI3LjUgMzQuMzc1IDI4LjEwNSAzNC4zNzUgMjguODc1QzM0LjM3NSAyOS42NDUgMzMuNzcgMzAuMjUgMzMgMzAuMjVMMjIgMzAuMjVDMjEuMjMgMzAuMjUgMjAuNjI1IDI5LjY0NSAyMC42MjUgMjguODc1WiIgZmlsbD0idXJsKCNwYWludF9saW5lYXJfMCkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+Cg==) 50%/contain no-repeat;display:inline-block}.NP1U9q_name{vertical-align:middle;align-items:center;min-width:0;height:24px;display:inline-flex}.NP1U9q_name:before{content:\"AI Shell\";letter-spacing:.04em;color:var(--dsw-alias-label-primary,#1a1a1a);white-space:nowrap;font-size:18px;font-weight:600;line-height:24px}";
@@ -277,6 +278,7 @@ const SUGGESTIONS = [
 	{
 		id: "inventory",
 		icon: "cloud",
+		hue: { tile: "var(--dsw-static-blue-400)" },
 		titleKey: "suggestion.inventory.title",
 		glossKey: "suggestion.inventory.gloss",
 		promptKey: "suggestion.inventory.prompt"
@@ -284,6 +286,7 @@ const SUGGESTIONS = [
 	{
 		id: "deploy",
 		icon: "deploy",
+		hue: { tile: "var(--dsw-static-green-500)" },
 		titleKey: "suggestion.deploy.title",
 		glossKey: "suggestion.deploy.gloss",
 		promptKey: "suggestion.deploy.prompt"
@@ -291,6 +294,7 @@ const SUGGESTIONS = [
 	{
 		id: "enterprise",
 		icon: "architecture",
+		hue: { tile: "rgb(139, 118, 246)" },
 		titleKey: "suggestion.enterprise.title",
 		glossKey: "suggestion.enterprise.gloss",
 		promptKey: "suggestion.enterprise.prompt"
@@ -298,6 +302,7 @@ const SUGGESTIONS = [
 	{
 		id: "billing",
 		icon: "cost",
+		hue: { tile: "var(--dsw-static-amber-600)" },
 		titleKey: "suggestion.billing.title",
 		glossKey: "suggestion.billing.gloss",
 		promptKey: "suggestion.billing.prompt"
@@ -483,11 +488,290 @@ function ringStep(pos, delta, n) {
 	};
 }
 
+//#endregion
+//#region src/client/autoplay.ts
+/**
+* Auto-rotation policy for the example-prompt strip.
+*
+* Kept apart from the component and free of DOM, for the same reason
+* `carousel.ts` is: the DECISION is what needs pinning down, and a decision
+* buried in an effect can only be checked by watching a browser.
+*
+* ## Why the strip advances on its own
+*
+* The strip shows three of four cards, so a card is always off screen and a
+* reader who never touches the arrows never learns it exists. Rotation is what
+* makes the set self-evident. The cost is that content moves without being
+* asked to, which is why every reason to stop is collected here rather than
+* decided piecemeal at the call site.
+*
+* ## Every reason to stop
+*
+*  - `engaged` — the pointer is over the strip or focus is inside it. Someone
+*    reaching for a card must not have it slide out from under the cursor;
+*    this is the pause the feature was asked for, and `focus` is the half of
+*    it that covers a reader who never uses a pointer.
+*  - `reducedMotion` — the reader asked the platform for less movement. An
+*    element that moves by itself for more than five seconds is exactly what
+*    `prefers-reduced-motion` exists to suppress, and a hover pause cannot help
+*    the reader who cannot hover. Honouring it is what keeps the feature from
+*    being motion no one consented to.
+*  - `visible` — the tab is hidden. A background tab still fires timers, so
+*    without this the strip would churn through slides nobody can see and land
+*    somewhere arbitrary on return.
+*  - `ready` — the ring has not been measured yet. Advancing before the step
+*    is known would move the track by a wrong distance; see the measurement
+*    note in `SuggestionCards.tsx`.
+*  - `ring` — three cards or fewer all fit, so there is nowhere to advance to.
+*    A strip with nothing to scroll must not appear to scroll.
+*
+* @module @huaweidevtools/aishell-dsh-brand/client/autoplay
+*/
+/**
+* How long each card is shown before the strip advances.
+*
+* Fixed rather than configurable: this is a hint at what the product can do,
+* not a reading surface, and a setting nobody asked for is a setting nobody
+* finds.
+*/
+const AUTOPLAY_INTERVAL_MS = 1500;
+/**
+* Whether the strip should be advancing on its own right now.
+*
+* Expressed as one predicate rather than a chain of early returns inside the
+* timer, so that adding a reason to stop is a change to this list and its
+* test — not a change to the effect that schedules the ticks.
+*/
+function autoplayActive(inputs) {
+	return inputs.ring && inputs.ready && !inputs.engaged && !inputs.reducedMotion && inputs.visible;
+}
+
+//#endregion
+//#region src/client/hero-content.ts
+/**
+* The mount point the suggestion strip renders into, inside the hero.
+*
+* ## Why a portal, and not CSS placement
+*
+* The strip is a `conversation.input.dock` entry, and that band renders BELOW
+* the hero workspace row in the composer stack. Measured on the live page
+* (1280×900, DSH 0.2.x):
+*
+*     hero (headline)              y=288  h=74
+*     hero workspace row           y=374  h=28
+*     conversation.input.dock      y=411  h=80
+*     the input card               y=491
+*
+* The product wants the cards directly under the headline, and the workspace
+* row sits between. A negative margin cannot cross it — the row would be
+* covered — and the row's own subtree is not reachable from the dock, since
+* the two are separate children of the composer stack.
+*
+* The hero, however, already renders an empty content div for exactly this
+* purpose. Its stack is: headline → (the "Powered by" label) → `_body`, where
+* `_body` is `flex-direction: column` and left empty by the official shell.
+* That is the hero's content area, and putting the cards there is using the
+* slot as intended rather than fighting the layout.
+*
+* ## How the mount is found
+*
+* By the hero's own class suffix, from the headline outward — `[class*="_body"]`
+* alone is ambiguous (the conversation root has a `_body` too, and the live
+* page has two). So the search starts at a `[class*="_headline"]`, steps to its
+* parent (the hero stack), and takes that stack's own `_body` child. The
+* headline is unique on the page and is what makes the walk unambiguous.
+*
+* Children are walked directly rather than with `:scope >`. The two are
+* equivalent here, and the direct walk keeps these helpers working against the
+* hand-rolled DOM stub the specs use (which has no selector engine) instead of
+* leaving the module's real logic untested.
+*
+* The classes are CSS-module hashes (`pXSMma_body`), hence the suffix match.
+* A base bump that renames them fails closed: {@link findHeroContent} returns
+* null, the portal renders nothing, and the arrows and cards simply do not
+* appear — the strip is never left in the wrong parent.
+*
+* @module @huaweidevtools/aishell-dsh-brand/client/hero-content
+*/
+/** The first direct child whose class contains `fragment`. */
+function childWithClass(parent, fragment) {
+	for (const child of Array.from(parent.children)) if (child.className.includes(fragment)) return child;
+	return null;
+}
+/** The first direct child carrying `data-<name>`. */
+function childWithData(parent, attribute) {
+	for (const child of Array.from(parent.children)) if (child.hasAttribute(attribute)) return child;
+	return null;
+}
+/** The child marker, so a disposer can find exactly the node it made. */
+const MOUNT_ATTRIBUTE = "data-aishell-suggestions-mount";
+/**
+* The hero's content area, or `null` when the hero is not on screen.
+*
+* Returns null rather than throwing: a New Session that has not painted its
+* hero yet is a normal state (and the strip retries on the next frame), not an
+* error.
+*/
+function findHeroContent(target) {
+	if (typeof target.querySelector !== "function") return null;
+	const headline = target.querySelector("[class*=\"_headline\"]");
+	const stack = headline?.parentElement ?? null;
+	if (stack === null) return null;
+	return childWithClass(stack, "_body");
+}
+/**
+* A container for the strip inside the hero content area.
+*
+* The hero body is `display: block` and zero-height, so the strip cannot rely
+* on it for layout and must not inherit that block context. The wrapper is
+* created here rather than rendered by React into the official div, because
+* React does not own that node — it owns only what the portal puts inside.
+*/
+function ensureHeroMount(content) {
+	const existing = childWithData(content, MOUNT_ATTRIBUTE);
+	if (existing !== null) return existing;
+	const mount = content.ownerDocument.createElement("div");
+	mount.setAttribute(MOUNT_ATTRIBUTE, "");
+	content.appendChild(mount);
+	return mount;
+}
+/**
+* Remove the mount this module created, if it is still there.
+*
+* Only the mount is removed — never the host div, which belongs to the shell
+* and is reused on the next New Session.
+*/
+function removeHeroMount(content) {
+	childWithData(content, MOUNT_ATTRIBUTE)?.remove();
+}
+
 //#endregion
 //#region src/client/SuggestionCards.tsx
 /** How many cards a full-width strip shows at once. */
 const VISIBLE = 3;
-/** One card. */
+/**
+* How much of a card's hue is washed into its own background, in percent.
+*
+* The card's ground is the shell's translucent interactive pair (neutral), and
+* this mixes the card's hue into BOTH ends of that pair so a card carries a
+* trace of its tile's colour without the hover turning into a colour change.
+*
+* 6 is measured rather than picked. Three things constrain it, and the numbers
+* below are computed from the real tokens in both themes:
+*
+*   - LEGIBILITY. The gloss text is the binding constraint, not the title. On
+*     the light theme's ground the gloss measures 3.33 at 0%, 3.14 at 8%, and
+*     falls to 2.90 at 14% — under the 3:1 bar. So the ceiling is ~12%.
+*   - VISIBILITY. A tint is not worth its cost below the just-noticeable
+*     difference (~2.3 dE). The card moves 3.4–5.1 dE away from its own
+*     untinted self at 6%, and only 1.7 dE at 3%, so the floor is ~4%.
+*   - THE TILE'S SEPARATION. The tile sits ON this ground, so tinting the
+*     ground eats the tile's contrast. Amber is the tightest case: 2.51 at 0%,
+*     2.39 at 6%, 2.31 at 10%. It survives, but this is why the percentage
+*     cannot be pushed for looks.
+*
+* 6% is the low end of the safe band, chosen deliberately: the tint is there to
+* warm the card toward its subject, not to become a colour block. It is not a
+* way to tell the cards apart — at 6% two different cards are only 2.4 dE
+* apart, barely at the threshold. The tile is what identifies a card.
+*/
+const HUE_WASH = 6;
+/**
+* The hero's content element, kept current across the hero's lifecycle.
+*
+* The hero mounts, unmounts and is REPLACED on each New Session, so the node
+* found at first paint goes stale. A `MutationObserver` is the only thing that
+* sees a replacement: the observer re-scans, and the scan is cheap because it
+* returns immediately while the current mount is still connected.
+*
+* @param active - whether the strip should be mounted at all.
+* @returns the element to portal into, or `null` while the hero is absent.
+*/
+function useHeroMount(active) {
+	const [mount, setMount] = (0, react.useState)(null);
+	const mountRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!active) {
+			setMount(null);
+			return;
+		}
+		let cancelled = false;
+		const scan = () => {
+			if (cancelled) return;
+			const current = mountRef.current;
+			if (current !== null && current.isConnected) {
+				setMount((seen) => seen === current ? seen : current);
+				return;
+			}
+			const content = findHeroContent(document);
+			if (content === null) {
+				mountRef.current = null;
+				setMount(null);
+				return;
+			}
+			const next = ensureHeroMount(content);
+			if (next !== mountRef.current) {
+				mountRef.current = next;
+				setMount(next);
+			}
+		};
+		scan();
+		const observer = new MutationObserver(scan);
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			cancelled = true;
+			observer.disconnect();
+		};
+	}, [active]);
+	(0, react.useEffect)(() => () => {
+		const current = mountRef.current;
+		mountRef.current = null;
+		if (current === null) return;
+		removeHeroMount(current.parentElement ?? current);
+	}, []);
+	return mount;
+}
+/** Whether the reader has asked the platform for reduced motion. */
+function useReducedMotion() {
+	const [reduced, setReduced] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+		setReduced(query.matches);
+		const onChange = (event) => {
+			setReduced(event.matches);
+		};
+		query.addEventListener("change", onChange);
+		return () => {
+			query.removeEventListener("change", onChange);
+		};
+	}, []);
+	return reduced;
+}
+/** Whether the tab is on screen. A hidden tab must not churn through slides. */
+function useTabVisible() {
+	const [visible, setVisible] = (0, react.useState)(true);
+	(0, react.useEffect)(() => {
+		const onVisibility = () => {
+			setVisible(document.visibilityState === "visible");
+		};
+		onVisibility();
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => {
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, []);
+	return visible;
+}
+/**
+* One card.
+*
+* A button, so keyboard activation, focus handling and disabled semantics come
+* for free. The icon is a decorative tile marked `aria-hidden`; the title and
+* gloss carry the meaning.
+*/
 function Card({ suggestion, onPick, t }) {
 	const [hover, setHover] = (0, react.useState)(false);
 	const [focus, setFocus] = (0, react.useState)(false);
@@ -513,39 +797,50 @@ function Card({ suggestion, onPick, t }) {
 			flex: `0 0 calc((100cqw - ${VISIBLE - 1} * var(--dsh-suggestion-gap)) / ${VISIBLE})`,
 			display: "flex",
 			alignItems: "flex-start",
-			gap: 10,
+			gap: 12,
 			boxSizing: "border-box",
 			minWidth: 0,
-			padding: "12px 14px",
+			padding: "14px",
 			textAlign: "left",
 			font: "inherit",
 			cursor: "pointer",
 			color: "var(--dsw-alias-label-primary)",
-			background: lit ? "var(--dsw-alias-interactive-bg-hover)" : "var(--dsw-alias-bg-module-platform)",
-			border: `1px solid ${lit ? "var(--dsw-alias-border-l2)" : "var(--dsw-alias-border-l3)"}`,
-			borderRadius: 10,
-			transition: "background 120ms ease, border-color 120ms ease",
+			background: lit ? `color-mix(in srgb, ${suggestion.hue.tile} ${HUE_WASH}%, var(--dsw-alias-interactive-bg-active))` : `color-mix(in srgb, ${suggestion.hue.tile} ${HUE_WASH}%, var(--dsw-alias-interactive-bg-hover))`,
+			border: "none",
+			borderRadius: "var(--dsw-radius-md, 12px)",
+			transition: "background-color 120ms ease",
 			outline: focus ? "2px solid var(--dsw-alias-state-business-primary)" : "none",
 			outlineOffset: 2
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
 			style: {
-				color: "var(--dsw-alias-label-secondary)",
-				marginTop: 1
+				flex: "none",
+				display: "grid",
+				placeItems: "center",
+				width: 32,
+				height: 32,
+				marginTop: 1,
+				borderRadius: "var(--dsw-radius-sm, 8px)",
+				background: suggestion.hue.tile,
+				color: "var(--dsw-static-neutral-bluish-1000, #0f1115)"
 			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionIconArt, { icon: suggestion.icon })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionIconArt, {
+				icon: suggestion.icon,
+				size: 17
+			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			style: {
 				display: "flex",
 				flexDirection: "column",
-				gap: 2,
+				gap: 3,
 				minWidth: 0
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				style: {
 					fontSize: "var(--dsh-content-font-size-secondary, 13px)",
-					fontWeight: 500,
-					lineHeight: "20px",
+					fontWeight: 600,
+					lineHeight: "19px",
 					overflow: "hidden",
 					textOverflow: "ellipsis",
 					whiteSpace: "nowrap"
@@ -554,7 +849,7 @@ function Card({ suggestion, onPick, t }) {
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				style: {
 					fontSize: "12px",
-					lineHeight: "16px",
+					lineHeight: "17px",
 					color: "var(--dsw-alias-label-tertiary)",
 					display: "-webkit-box",
 					WebkitLineClamp: 2,
@@ -620,8 +915,40 @@ function SuggestionCards(props) {
 	const trackRef = (0, react.useRef)(null);
 	const posRef = (0, react.useRef)(ringStart(n));
 	const stepRef = (0, react.useRef)(0);
-	const [animating, setAnimating] = (0, react.useState)(true);
 	const [ready, setReady] = (0, react.useState)(!ring);
+	const [engaged, setEngaged] = (0, react.useState)(false);
+	const reducedMotion = useReducedMotion();
+	const visible = useTabVisible();
+	const mount = useHeroMount(blank);
+	/**
+	* The slide's own animation, written by this component and nobody else.
+	*
+	* `transform` and `transition` are BOTH owned by the imperative code below
+	* and are deliberately absent from the `style` prop further down. They have
+	* to have exactly one owner: a value declared in JSX is only re-applied when
+	* React sees it CHANGE, so the first time the effect writes
+	* `track.style.transition = 'none'` (or clears it with `''`), React's
+	* declared value is gone and React has no reason to write it again. The
+	* track then keeps the browser default — `all 0s` — and every "slide" lands
+	* instantly with a hard cut. That is a silent failure: positions, wrapping
+	* and the ring all still measure correct, so only watching the motion
+	* reveals it.
+	*
+	* A slow, eased curve rather than a short linear one: the strip shows one
+	* card leaving and one arriving, and at 320ms with a snappy curve it reads
+	* as a jump cut rather than travel.
+	*
+	* The curve is `cubic-bezier(.33,0,.15,1)`, chosen for its END VELOCITIES
+	* and not its looks on a graph. Measured as distance-per-unit-time (1.0
+	* being a linear slide) it starts at 0.4, peaks near 2.7, and finishes at
+	* 0.05 — eased away from rest and brought gently to rest. The obvious
+	* "smooth" pick, `cubic-bezier(.16,.84,.28,1)` (a material-style fast-out),
+	* starts at 4.39: it covers 44% of the distance in the first 10% of the
+	* time and then crawls. On a row of cards that reads as a snap followed by
+	* a stall, which is the opposite of what a carousel wants.
+	*/
+	const SLIDE_MS = 520;
+	const SLIDE_EASING = "cubic-bezier(.33,0,.15,1)";
 	/** Place the track at a position with no transition. */
 	const snapTo = (0, react.useCallback)((pos) => {
 		const track = trackRef.current;
@@ -633,16 +960,24 @@ function SuggestionCards(props) {
 	const slideTo = (0, react.useCallback)((pos) => {
 		const track = trackRef.current;
 		if (track === null) return;
-		track.style.transition = "";
+		track.style.transition = `transform ${SLIDE_MS}ms ${SLIDE_EASING}`;
 		track.style.transform = `translate3d(${-pos * stepRef.current}px, 0, 0)`;
 	}, []);
+	const autoplayTimerRef = (0, react.useRef)(0);
+	const latestStepRef = (0, react.useRef)(() => {});
 	/**
-	* Measure one step, then place the ring at its start.
+	* Schedule the next auto-rotation tick one full interval from now,
+	* replacing any tick already pending.
 	*
-	* The step is read from a real card rather than computed from the viewport
-	* width so the fraction in `Card`'s flex-basis and this number cannot drift
-	* apart, and so a breakpoint change needs no constant updated here.
+	* Called by every `step`, which is what makes the cadence immune to a tick
+	* landing mid-slide.
 	*/
+	const bumpAutoplay = (0, react.useCallback)(() => {
+		window.clearTimeout(autoplayTimerRef.current);
+		autoplayTimerRef.current = window.setTimeout(() => {
+			latestStepRef.current(1);
+		}, AUTOPLAY_INTERVAL_MS);
+	}, []);
 	/**
 	* Re-measure one step and re-apply the current position.
 	*
@@ -667,17 +1002,11 @@ function SuggestionCards(props) {
 		if (!(step$1 > 0)) return false;
 		const changed = step$1 !== stepRef.current;
 		stepRef.current = step$1;
-		if (changed) {
-			setAnimating(false);
-			snapTo(posRef.current);
-			window.requestAnimationFrame(() => {
-				setAnimating(true);
-			});
-		}
+		if (changed) snapTo(posRef.current);
 		return true;
 	}, [snapTo]);
 	(0, react.useEffect)(() => {
-		if (!blank || !ring) return;
+		if (!blank || !ring || mount === null) return;
 		let cancelled = false;
 		const settle = () => {
 			if (cancelled) return;
@@ -686,11 +1015,9 @@ function SuggestionCards(props) {
 				return;
 			}
 			posRef.current = ringStart(n);
-			setAnimating(false);
 			snapTo(posRef.current);
 			window.requestAnimationFrame(() => {
 				if (cancelled) return;
-				setAnimating(true);
 				setReady(true);
 				const viewport = viewportRef.current;
 				if (viewport !== null) {
@@ -712,56 +1039,85 @@ function SuggestionCards(props) {
 		blank,
 		ring,
 		n,
+		mount,
 		remeasure,
 		snapTo
 	]);
 	/**
-	* Apply whichever rewind the settling position owes, then re-arm the
-	* transition.
+	* Apply whichever rewind the settling position owes.
+	*
+	* Runs when the track reaches its destination, never before the slide:
+	* jumping to the twin position first would put the destination on screen
+	* immediately and then animate away from it, so a click at the seam would
+	* look like it skipped a card. See the module note in carousel.ts.
+	*
+	* The rewind lands on a position showing exactly the cards already on
+	* screen, so `snapTo`'s lack of animation is invisible.
 	*
-	* Runs on `transitionend`, never before the slide: jumping to the twin
-	* position first would put the destination on screen immediately and then
-	* animate away from it, so a click at the seam would look like it skipped
-	* a card. See the module note in carousel.ts.
+	* Only a COMPLETED transition reaches here: an interrupted one fires
+	* `transitioncancel` instead, so there is no partial-position case to
+	* filter out. A person clicking faster than a slide therefore skips this
+	* handler entirely — the rewind they owe is settled by `ringStep` at the
+	* start of their next press, which snaps the same invisible twin.
 	*/
-	const onSettle = (0, react.useCallback)(() => {
+	const onSettle = (0, react.useCallback)((event) => {
 		if (!ring) return;
+		if (event.target !== trackRef.current) return;
+		if (event.propertyName !== "transform") return;
 		const owed = rewindTo(posRef.current, n);
 		if (owed === null) return;
 		posRef.current = owed;
-		setAnimating(false);
 		snapTo(owed);
-		window.requestAnimationFrame(() => {
-			setAnimating(true);
-		});
 	}, [
 		ring,
 		n,
 		snapTo
 	]);
-	/** One arrow press. */
+	/** One step of the ring, from an arrow or from auto-rotation. */
 	const step = (0, react.useCallback)((delta) => {
 		if (!ring || !ready) return;
+		bumpAutoplay();
 		const { from, to } = ringStep(posRef.current, delta, n);
 		if (from !== posRef.current) {
 			posRef.current = from;
-			setAnimating(false);
 			snapTo(from);
 		}
 		posRef.current = to;
-		window.requestAnimationFrame(() => {
-			setAnimating(true);
-			slideTo(to);
-		});
+		slideTo(to);
 	}, [
 		ring,
 		ready,
 		n,
 		snapTo,
-		slideTo
+		slideTo,
+		bumpAutoplay
+	]);
+	(0, react.useEffect)(() => {
+		latestStepRef.current = step;
+	}, [step]);
+	(0, react.useEffect)(() => {
+		if (!autoplayActive({
+			ring,
+			ready,
+			engaged,
+			reducedMotion,
+			visible
+		})) return;
+		bumpAutoplay();
+		return () => {
+			window.clearTimeout(autoplayTimerRef.current);
+		};
+	}, [
+		ring,
+		ready,
+		engaged,
+		reducedMotion,
+		visible,
+		bumpAutoplay
 	]);
 	if (!blank) return null;
 	if (n === 0) return null;
+	if (mount === null) return null;
 	const cards = ring ? Array.from({ length: ringLength(n) }, (_, i) => SUGGESTIONS[i % n]) : SUGGESTIONS;
 	const strip = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: viewportRef,
@@ -781,9 +1137,7 @@ function SuggestionCards(props) {
 				alignItems: "stretch",
 				gap: "var(--dsh-suggestion-gap)",
 				width: "max-content",
-				willChange: "transform",
-				transition: animating ? "transform 320ms cubic-bezier(.22,.61,.36,1)" : "none",
-				transform: "translate3d(0, 0, 0)"
+				willChange: "transform"
 			},
 			children: cards.map((suggestion, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Card, {
 				suggestion,
@@ -792,14 +1146,27 @@ function SuggestionCards(props) {
 			}, `${i}:${suggestion.id}`))
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		onPointerEnter: () => {
+			setEngaged(true);
+		},
+		onPointerLeave: () => {
+			setEngaged(false);
+		},
+		onFocus: () => {
+			setEngaged(true);
+		},
+		onBlur: (event) => {
+			const next = event.relatedTarget;
+			if (next === null || !event.currentTarget.contains(next)) setEngaged(false);
+		},
 		style: {
-			["--dsh-suggestion-gap"]: "8px",
+			["--dsh-suggestion-gap"]: "10px",
 			display: "flex",
 			alignItems: "center",
 			gap: 6,
 			minWidth: 0,
-			margin: "4px 0 8px"
+			margin: "12px 0 22px"
 		},
 		children: [
 			ring && ready && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, {
@@ -818,7 +1185,7 @@ function SuggestionCards(props) {
 				}
 			})
 		]
-	});
+	}), mount);
 }
 
 //#endregion

package/lib/types/client/SuggestionCards.d.ts

@@ -1,40 +1,88 @@
 /**
  * Example-prompt cards for the New-Session hero.
  *
- * ## Where this renders, and why there
+ * ## Where this renders, and why it takes a portal to get there
  *
- * `conversation.input.dock` is the band between the hero workspace row and
- * the input card. It is a `list` slot, so this entry composes beside
- * whatever else occupies the band instead of competing for a seat — the
- * hero row's own seats (`conversation.hero.workspace`,
- * `conversation.hero.agentPreset`) are `single` and already held by official
- * occupants, which is the trap the account chip next door documents.
+ * The entry occupies `conversation.input.dock`, the band between the hero
+ * workspace row and the input card. That is where the strip is MOUNTED — but
+ * not where it is DRAWN: the product wants the cards directly under the hero
+ * headline, and the workspace row sits between the two.
+ *
+ * Measured on the live page (1280×900):
+ *
+ *     hero (headline)              y=288  h=74
+ *     hero workspace row           y=374  h=28
+ *     conversation.input.dock      y=411  h=80
+ *     the input card               y=491
+ *
+ * The row cannot be crossed with a margin — it would be covered — and its DOM
+ * is a sibling subtree, unreachable from the dock. So the strip renders
+ * through `createPortal` into the hero's own content div, the empty `_body`
+ * the official shell leaves for exactly this. See `hero-content.ts` for how
+ * that mount is found and why it fails closed.
+ *
+ * The dock entry is still what supplies the slot props (`useSession`,
+ * `inputActions`, `t`), so the registration is unchanged; the portal only
+ * relocates the output. What the dock band itself renders is nothing.
  *
  * ## When it renders
  *
- * The band itself renders in both the New-Session hero and the docked
- * session composer — it only needs a live input zone — so the gate is
- * `session.blank`, the same condition the account chip uses. `blank` is true
- * from the moment a New Session opens until the first turn is accepted:
- * exactly the window the cards exist for. Once the first message is sent the
- * strip renders nothing and the composer takes over.
- *
- * ## Carousel
- *
- * Three cards or fewer sit side by side with no controls — a strip with
- * nothing to scroll should not offer scrolling. More than three become a
- * carousel: the row scrolls horizontally, arrows step it one card at a
- * time, and it wraps at both ends. Wrapping rather than disabling the
- * arrow at an end keeps the two controls symmetric (an arrow that is
- * sometimes dead is a control a person has to think about), and it is what
- * the feature was asked for.
- *
- * The arrows hold the scroll container's position in a ref and clamp it
- * themselves rather than reading scrollLeft back from the DOM: the read
- * happens before the browser has applied a pending smooth scroll, so a
- * second click during the animation would compute from a stale position and
- * step backwards. The container's own scroll event re-syncs the ref, so a
- * manual trackpad scroll cannot desynchronize it.
+ * The dock band renders in BOTH the hero and the docked composer (it only
+ * needs a live input zone), so the gate is `session.blank` — the same
+ * condition the account chip next door uses. `blank` is true from the moment a
+ * New Session opens until the first turn is accepted: exactly the window the
+ * cards exist for. Once the first message is sent the strip renders nothing
+ * and the composer takes over.
+ *
+ * ## Why it does not look like the input card
+ *
+ * The first version read as a second input box, and the reason was measurable
+ * rather than a matter of taste. Both surfaces were built from the same two
+ * ingredients the shell reserves for a composer:
+ *
+ *   - the same neutral one step apart — the card was `bg-module-platform`
+ *     (`#353638` in dark) and the composer `specific-input-major` (`#2c2c2e`),
+ *     both rungs of one ramp, so the two read as siblings;
+ *   - the same box-shadow token. `--dsw-elevation-soft` expands to
+ *     `var(--dsw-elevation-stroke), …`, and that stroke is a
+ *     `0 0 0 .5px` ring — so "no border" had not removed the outline at all,
+ *     it had only moved it into the shadow. Both surfaces carry a hairline.
+ *
+ * The fix is to use the shell's vocabulary for a CHOICE rather than for a
+ * FIELD. Every pickable surface in the product — the option list in the
+ * question card (`border-radius: var(--dsw-radius-md)`, `background: 0 0`),
+ * the command and trigger lists, the portalled menu — draws itself the same
+ * way: a transparent ground, a `radius-md` corner, and a fill that appears
+ * only on hover or selection. A field, by contrast, is an opaque well inset
+ * into the page.
+ *
+ * So a card here is:
+ *
+ *   - TRANSLUCENT, not opaque and not empty. The shell explains this exact
+ *     choice for `SegmentedControl`: a translucent fill "reads as a place
+ *     rather than a second button". Opaque is what made the card a well;
+ *     fully transparent is invisible on a white page, where the light theme
+ *     would leave nothing but floating text. The tint is the shell's own
+ *     interactive pair — `interactive-bg-hover` at rest, `interactive-bg-active`
+ *     on hover — so hovering reads as the same material intensifying;
+ *   - `radius-md` (12px), the choice radius, against the composer's 28px
+ *     `radius-panel`;
+ *   - no shadow at rest. The shell gives an elevated surface a shadow only
+ *     when it FLOATS over other content (a menu, a hovercard, a modal); a
+ *     card sitting inline in the page gets none, so neither does this.
+ *
+ * The icon tile keeps an accent tint — `Tag`'s info tone and the plan
+ * package's chip both paint `color-mix(… business-primary 10%, transparent)`
+ * — on a square with `radius-sm`, matching those chips' geometry.
+ *
+ * ## Auto-rotation
+ *
+ * The strip shows three of four cards, so the fourth would otherwise be
+ * invisible to anyone who does not touch the arrows. It advances one card
+ * every {@link AUTOPLAY_INTERVAL_MS}, pausing on hover, on keyboard focus, in
+ * a background tab, and under `prefers-reduced-motion`. The policy itself
+ * lives in `autoplay.ts`, kept pure so the list of reasons to stop is testable
+ * rather than buried in an effect.
  *
  * @module @huaweidevtools/aishell-dsh-brand/client/SuggestionCards
  */

package/lib/types/client/autoplay.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Auto-rotation policy for the example-prompt strip.
+ *
+ * Kept apart from the component and free of DOM, for the same reason
+ * `carousel.ts` is: the DECISION is what needs pinning down, and a decision
+ * buried in an effect can only be checked by watching a browser.
+ *
+ * ## Why the strip advances on its own
+ *
+ * The strip shows three of four cards, so a card is always off screen and a
+ * reader who never touches the arrows never learns it exists. Rotation is what
+ * makes the set self-evident. The cost is that content moves without being
+ * asked to, which is why every reason to stop is collected here rather than
+ * decided piecemeal at the call site.
+ *
+ * ## Every reason to stop
+ *
+ *  - `engaged` — the pointer is over the strip or focus is inside it. Someone
+ *    reaching for a card must not have it slide out from under the cursor;
+ *    this is the pause the feature was asked for, and `focus` is the half of
+ *    it that covers a reader who never uses a pointer.
+ *  - `reducedMotion` — the reader asked the platform for less movement. An
+ *    element that moves by itself for more than five seconds is exactly what
+ *    `prefers-reduced-motion` exists to suppress, and a hover pause cannot help
+ *    the reader who cannot hover. Honouring it is what keeps the feature from
+ *    being motion no one consented to.
+ *  - `visible` — the tab is hidden. A background tab still fires timers, so
+ *    without this the strip would churn through slides nobody can see and land
+ *    somewhere arbitrary on return.
+ *  - `ready` — the ring has not been measured yet. Advancing before the step
+ *    is known would move the track by a wrong distance; see the measurement
+ *    note in `SuggestionCards.tsx`.
+ *  - `ring` — three cards or fewer all fit, so there is nowhere to advance to.
+ *    A strip with nothing to scroll must not appear to scroll.
+ *
+ * @module @huaweidevtools/aishell-dsh-brand/client/autoplay
+ */
+/**
+ * How long each card is shown before the strip advances.
+ *
+ * Fixed rather than configurable: this is a hint at what the product can do,
+ * not a reading surface, and a setting nobody asked for is a setting nobody
+ * finds.
+ */
+export declare const AUTOPLAY_INTERVAL_MS = 1500;
+/** Everything that can hold the strip still. */
+export interface AutoplayInputs {
+    /** More cards than fit, so there is somewhere to advance to. */
+    readonly ring: boolean;
+    /** The ring has been measured and the track can be moved a known distance. */
+    readonly ready: boolean;
+    /** The pointer is over the strip, or focus is inside it. */
+    readonly engaged: boolean;
+    /** The reader asked for reduced motion. */
+    readonly reducedMotion: boolean;
+    /** The tab is on screen. */
+    readonly visible: boolean;
+}
+/**
+ * Whether the strip should be advancing on its own right now.
+ *
+ * Expressed as one predicate rather than a chain of early returns inside the
+ * timer, so that adding a reason to stop is a change to this list and its
+ * test — not a change to the effect that schedules the ticks.
+ */
+export declare function autoplayActive(inputs: AutoplayInputs): boolean;
+//# sourceMappingURL=autoplay.d.ts.map

package/lib/types/client/hero-content.d.ts

@@ -0,0 +1,70 @@
+/**
+ * The mount point the suggestion strip renders into, inside the hero.
+ *
+ * ## Why a portal, and not CSS placement
+ *
+ * The strip is a `conversation.input.dock` entry, and that band renders BELOW
+ * the hero workspace row in the composer stack. Measured on the live page
+ * (1280×900, DSH 0.2.x):
+ *
+ *     hero (headline)              y=288  h=74
+ *     hero workspace row           y=374  h=28
+ *     conversation.input.dock      y=411  h=80
+ *     the input card               y=491
+ *
+ * The product wants the cards directly under the headline, and the workspace
+ * row sits between. A negative margin cannot cross it — the row would be
+ * covered — and the row's own subtree is not reachable from the dock, since
+ * the two are separate children of the composer stack.
+ *
+ * The hero, however, already renders an empty content div for exactly this
+ * purpose. Its stack is: headline → (the "Powered by" label) → `_body`, where
+ * `_body` is `flex-direction: column` and left empty by the official shell.
+ * That is the hero's content area, and putting the cards there is using the
+ * slot as intended rather than fighting the layout.
+ *
+ * ## How the mount is found
+ *
+ * By the hero's own class suffix, from the headline outward — `[class*="_body"]`
+ * alone is ambiguous (the conversation root has a `_body` too, and the live
+ * page has two). So the search starts at a `[class*="_headline"]`, steps to its
+ * parent (the hero stack), and takes that stack's own `_body` child. The
+ * headline is unique on the page and is what makes the walk unambiguous.
+ *
+ * Children are walked directly rather than with `:scope >`. The two are
+ * equivalent here, and the direct walk keeps these helpers working against the
+ * hand-rolled DOM stub the specs use (which has no selector engine) instead of
+ * leaving the module's real logic untested.
+ *
+ * The classes are CSS-module hashes (`pXSMma_body`), hence the suffix match.
+ * A base bump that renames them fails closed: {@link findHeroContent} returns
+ * null, the portal renders nothing, and the arrows and cards simply do not
+ * appear — the strip is never left in the wrong parent.
+ *
+ * @module @huaweidevtools/aishell-dsh-brand/client/hero-content
+ */
+/**
+ * The hero's content area, or `null` when the hero is not on screen.
+ *
+ * Returns null rather than throwing: a New Session that has not painted its
+ * hero yet is a normal state (and the strip retries on the next frame), not an
+ * error.
+ */
+export declare function findHeroContent(target: Document): HTMLElement | null;
+/**
+ * A container for the strip inside the hero content area.
+ *
+ * The hero body is `display: block` and zero-height, so the strip cannot rely
+ * on it for layout and must not inherit that block context. The wrapper is
+ * created here rather than rendered by React into the official div, because
+ * React does not own that node — it owns only what the portal puts inside.
+ */
+export declare function ensureHeroMount(content: HTMLElement): HTMLElement;
+/**
+ * Remove the mount this module created, if it is still there.
+ *
+ * Only the mount is removed — never the host div, which belongs to the shell
+ * and is reused on the next New Session.
+ */
+export declare function removeHeroMount(content: HTMLElement): void;
+//# sourceMappingURL=hero-content.d.ts.map

package/lib/types/client/suggestions.d.ts

@@ -44,6 +44,8 @@ export interface Suggestion {
     readonly id: string;
     /** Icon key resolved by {@link SuggestionIconArt}. */
     readonly icon: SuggestionIcon;
+    /** The tile colour, measured to work in both themes. See {@link SuggestionHue}. */
+    readonly hue: SuggestionHue;
     /** Dictionary key for the card's one-line title. */
     readonly titleKey: AishellBrandLocaleKey;
     /** Dictionary key for the line under the title. */
@@ -53,6 +55,58 @@ export interface Suggestion {
 }
 /** The icon set this strip can draw. Keys are local to this plugin. */
 export type SuggestionIcon = 'cloud' | 'deploy' | 'architecture' | 'cost';
+/**
+ * The tile colour for one card, as the shell's own token names.
+ *
+ * ## Why each card carries its own hue
+ *
+ * The first version drew every icon in one accent, on the reasoning that four
+ * hues beside the brand mark would read as noise. That was a guess, and the
+ * shell contradicts it: `FileTypeIcon` gives every item in a row its own hue
+ * (`code` blue, `excel` green, `folder` amber, `image` violet), which is the
+ * same situation — a row of small glyphs read at a glance — and it chooses
+ * per-item colour. Colour is what makes such a row scannable rather than a
+ * wall of identical tiles.
+ *
+ * ## These are STATIC tokens, not the semantic ones
+ *
+ * `--dsw-alias-state-success-primary` and friends mean "the operation
+ * succeeded" / "this needs attention". A card about cost is not a warning, so
+ * borrowing the warning colour would be a lie the palette tells. The `static`
+ * family is the one intended for decorative identity, which is exactly what a
+ * card's hue is — and `FileTypeIcon` reaches for the same family.
+ *
+ * ## The values were chosen by measurement, in both themes
+ *
+ * Violet is the exception: the design platform ships NO violet token, so
+ * `FileTypeIcon` defines one locally (`rgb(139, 118, 246)`) for its own
+ * artwork. The same value is reused here rather than inventing a second one,
+ * and it is the only literal colour in this plugin.
+ *
+ * The four were picked to clear three bars at once, in both themes:
+ *
+ *   - glyph on its tile >= 4.5 — measured 5.42 at worst (violet);
+ *   - tile against the card >= 1.6 — measured 2.05 at worst;
+ *   - worst pairwise colour distance >= 30 (CIE76 dE) — measured 38.7.
+ *
+ * The last bar is the one that matters for "four colours, not one blur": an
+ * obvious-looking pick like blue + violet measures only 17.5 apart, which is
+ * why this is measured rather than eyeballed.
+ */
+export interface SuggestionHue {
+    /**
+     * The tile fill. A SOLID hue, with the glyph in `--dsw-alias-label-primary-
+     * foreground` on top.
+     *
+     * A tint of the hue was the first attempt and it measured badly: a glyph
+     * drawn in a hue on top of a tint of that same hue has almost nothing to
+     * separate them, so the contrast was 1.8–2.8 — and RAISING the tint made it
+     * worse, since more of the hue behind the glyph means less difference from
+     * it. A solid tile puts the glyph on full-strength colour instead, which
+     * measured 5.4–9.9 for the same hues.
+     */
+    readonly tile: string;
+}
 /**
  * The cards, in display order.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@huaweidevtools/aishell-dsh-brand",
   "description": "AI Shell brand reskin for DSH web — replaces sidebar and hero brand marks with AI Shell SVG",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "publishConfig": {
     "access": "public"
   },
@@ -51,7 +51,9 @@
     "@deepseek-ai/dsh-client-ui-sidebar": "0.2.0-rc.1 || 0.2.1-rc.1 || 0.2.1-rc.2 || 0.2.1",
     "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.1 || 0.2.1-rc.1 || 0.2.1-rc.2 || 0.2.1",
     "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.1",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tsdown": "^0.10.0",
     "typescript": "^5.7.0"
   },