webs-sdk 0.19.65 → 0.19.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/ConfiguredMediaPlayer.d.ts.map +1 -1
- package/dist/components/ui/ConfiguredMediaPlayer.js +17 -6
- package/dist/components/ui/ConfiguredMediaPlayer.js.map +1 -1
- package/package.json +1 -1
- package/skills/webs-sdk-package/SKILL.md +10 -0
- package/skills/webs-sdk-package/references/components.md +3 -1
- package/skills/webs-sdk-package/references/ui.md +197 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfiguredMediaPlayer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ConfiguredMediaPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAqBL,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAEpF,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE5B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,QAAQ,CAAC,EAAE,6BAA6B,CAAC;IAEzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;CACrJ;
|
|
1
|
+
{"version":3,"file":"ConfiguredMediaPlayer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ConfiguredMediaPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAqBL,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAEpF,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE5B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,QAAQ,CAAC,EAAE,6BAA6B,CAAC;IAEzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;CACrJ;AA+DD,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAmB,EACnB,MAAM,EACN,QAAgB,EAChB,OAAoB,EACpB,KAAa,EACb,IAAY,EACZ,WAAkB,EAClB,MAAM,EACN,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAgB,EAChB,cAAc,EACd,UAAU,EACV,KAAsB,EACtB,QAAe,EACf,GAAG,SAAS,EACb,EAAE,0BAA0B,2CAgD5B"}
|
|
@@ -72,21 +72,32 @@ function useMediaSource(src, mediaType) {
|
|
|
72
72
|
const element = ref.current;
|
|
73
73
|
if (!element || !isHls)
|
|
74
74
|
return;
|
|
75
|
-
if (element.canPlayType("application/vnd.apple.mpegurl")) {
|
|
75
|
+
if (typeof MediaSource === "undefined" && element.canPlayType("application/vnd.apple.mpegurl")) {
|
|
76
76
|
element.src = src;
|
|
77
77
|
return;
|
|
78
78
|
}
|
|
79
79
|
let cancelled = false;
|
|
80
80
|
let instance;
|
|
81
81
|
Promise.resolve().then(() => __importStar(require("hls.js"))).then(({ default: HlsModule }) => {
|
|
82
|
-
if (cancelled
|
|
82
|
+
if (cancelled)
|
|
83
83
|
return;
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
if (HlsModule.isSupported()) {
|
|
85
|
+
instance = new HlsModule();
|
|
86
|
+
instance.loadSource(src);
|
|
87
|
+
instance.attachMedia(element);
|
|
88
|
+
}
|
|
89
|
+
else if (element.canPlayType("application/vnd.apple.mpegurl")) {
|
|
90
|
+
element.src = src;
|
|
91
|
+
}
|
|
87
92
|
}).catch((error) => {
|
|
88
|
-
if (
|
|
93
|
+
if (cancelled)
|
|
94
|
+
return;
|
|
95
|
+
if (element.canPlayType("application/vnd.apple.mpegurl")) {
|
|
96
|
+
element.src = src;
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
89
99
|
console.warn("Unable to load HLS playback", error);
|
|
100
|
+
}
|
|
90
101
|
});
|
|
91
102
|
return () => {
|
|
92
103
|
cancelled = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfiguredMediaPlayer.js","sourceRoot":"","sources":["../../../src/components/ui/ConfiguredMediaPlayer.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ConfiguredMediaPlayer.js","sourceRoot":"","sources":["../../../src/components/ui/ConfiguredMediaPlayer.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ib,sDAoEC;;AAjND,6CAA+B;AAE/B,iDAsBwB;AAwDxB,MAAM,gBAAgB,GAA4C;IAChE,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,KAAK;IAClB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,KAAK;IACX,gBAAgB,EAAE,KAAK;IACvB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,SAAS,cAAc,CAAC,GAAW,EAAE,SAA4B;IAC/D,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAsC,IAAI,CAAC,CAAC;IACpE,MAAM,KAAK,GAAG,SAAS,KAAK,OAAO,IAAI,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAErE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;YAAE,OAAO;QAE/B,IAAI,OAAO,WAAW,KAAK,WAAW,IAAI,OAAO,CAAC,WAAW,CAAC,+BAA+B,CAAC,EAAE,CAAC;YAC/F,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,QAAyB,CAAC;QAC9B,kDAAO,QAAQ,IAAE,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;YAC/C,IAAI,SAAS;gBAAE,OAAO;YAGtB,IAAI,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;gBAC5B,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC;gBAC3B,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;gBACzB,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAChC,CAAC;iBAAM,IAAI,OAAO,CAAC,WAAW,CAAC,+BAA+B,CAAC,EAAE,CAAC;gBAChE,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;YACpB,CAAC;QACH,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,SAAS;gBAAE,OAAO;YACtB,IAAI,OAAO,CAAC,WAAW,CAAC,+BAA+B,CAAC,EAAE,CAAC;gBACzD,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;YACrD,CAAC;QACH,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,EAAE,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjB,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;AACrD,CAAC;AAGD,SAAgB,qBAAqB,CAAC,EAoBT;;QApBS,EACpC,GAAG,EACH,SAAS,GAAG,OAAO,EACnB,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,UAAU,EACpB,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,KAAK,EACZ,WAAW,GAAG,IAAI,EAClB,MAAM,EACN,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,GAAG,EAAE,EAChB,cAAc,EACd,UAAU,EACV,KAAK,GAAG,cAAc,EACtB,QAAQ,GAAG,IAAI,OAEY,EADxB,SAAS,cAnBwB,iOAoBrC,CADa;IAEZ,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAA,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,0CAAE,IAAI,mCAAI,EAAE,CAAC,CAAC;IAC5F,MAAM,SAAS,GAAG,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,0CAAE,GAAG,mCAAI,GAAG,CAAC;IAClF,MAAM,QAAQ,mCAAQ,gBAAgB,GAAK,YAAY,CAAE,CAAC;IAC1D,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAChE,MAAM,eAAe,mCAAQ,UAAU,KAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,GAAE,CAAC;IAEvG,OAAO,CACL,wBAAC,0BAAW,oBAAK,SAAS,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aACzD,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CACvB,uBAAC,+BAAgB,oBAAuC,eAAe,IAAE,GAAG,EAAE,GAAkC,EAAE,MAAM,EAAE,MAAM,YAC7H,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,kDAAiD,KAAK,GAA1C,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO,EAAE,CAAe,CAAC,KAD9D,GAAG,SAAS,IAAI,SAAS,EAAE,CAE/B,CACpB,CAAC,CAAC,CAAC,CACF,uBAAC,+BAAgB,oBAAuC,eAAe,IAAE,GAAG,EAAE,GAAkC,KAAzF,GAAG,SAAS,IAAI,SAAS,EAAE,CAAkE,CACrH,EACA,QAAQ,CAAC,OAAO,IAAI,uBAAC,iCAAkB,KAAG,EAC1C,QAAQ,CAAC,KAAK,IAAI,uBAAC,+BAAgB,KAAG,EACvC,uBAAC,yCAA0B,KAAG,EAC9B,wBAAC,kCAAmB,eACjB,QAAQ,CAAC,IAAI,IAAI,uBAAC,8BAAe,kBAAY,eAAe,GAAG,EAC/D,QAAQ,CAAC,WAAW,IAAI,uBAAC,sCAAuB,IAAC,OAAO,EAAE,WAAW,GAAI,EACzE,QAAQ,CAAC,IAAI,IAAI,uBAAC,8BAAe,IAAC,SAAS,EAAC,gBAAgB,GAAG,EAC/D,QAAQ,CAAC,WAAW,IAAI,uBAAC,qCAAsB,IAAC,OAAO,EAAE,WAAW,GAAI,EACxE,QAAQ,CAAC,IAAI,IAAI,uBAAC,8BAAe,KAAG,EACpC,QAAQ,CAAC,MAAM,IAAI,uBAAC,gCAAiB,KAAG,EACxC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,iDACa,gBAAgB,EAC3B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;4BAChC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBACzC,CAAC,EACD,SAAS,EAAC,kDAAkD,YAE3D,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,mCAA0B,KAAK,EAAE,MAAM,CAAC,IAAI,YAAG,MAAM,CAAC,IAAI,IAA7C,MAAM,CAAC,IAAI,CAA4C,CAAC,GACvF,CACV,EACA,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAC,kCAAmB,IAAC,MAAM,EAAE,cAAc,GAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAC,uCAAwB,IAAC,MAAM,EAAE,cAAc,GAAI,CAAC,CAAC,CAAC,IAAI,EAClJ,SAAS,KAAK,OAAO,IAAI,QAAQ,CAAC,QAAQ,IAAI,uBAAC,kCAAmB,KAAG,EACrE,QAAQ,CAAC,IAAI,IAAI,uBAAC,8BAAe,KAAG,EACpC,SAAS,KAAK,OAAO,IAAI,QAAQ,CAAC,gBAAgB,IAAI,uBAAC,6BAAc,KAAG,EACxE,SAAS,KAAK,OAAO,IAAI,QAAQ,CAAC,UAAU,IAAI,uBAAC,oCAAqB,KAAG,EACzE,QAAQ,CAAC,QAAQ,IAAI,uBAAC,kCAAmB,KAAG,IACzB,KACV,CACf,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -9,3 +9,13 @@ description: Use the webs-sdk npm package in Nexum portals. Activate when choosi
|
|
|
9
9
|
2. Verify the installed package version and exact public exports/types in `node_modules/webs-sdk/dist/index.d.ts` or `node_modules/webs-sdk/dist/components/ui/index.d.ts`. Catalog is a guide, not an exhaustive or version-independent API contract.
|
|
10
10
|
3. Use `webs-sdk` or `webs-sdk/ui`; never import from private `dist/` paths. Keep default `WebsSDK` singleton out of client components. Add client boundary for interactive React UI. Consult installed `node_modules/webs-sdk/docs/` for feature-specific guidance.
|
|
11
11
|
4. If functionality is absent, report the gap before creating shared functionality in a portal. Add reusable code to the SDK instead.
|
|
12
|
+
|
|
13
|
+
## UI governance (webs-sdk/ui)
|
|
14
|
+
|
|
15
|
+
**Prefer verified `webs-sdk/ui` exports over direct `@radix-ui` imports or local duplicates.** The SDK supplies many accessible primitives with `data-slot` attributes; check its actual export barrel before choosing one. Avoid direct Radix dependencies where an SDK export exists.
|
|
16
|
+
|
|
17
|
+
**Structural primitives are largely unbranded.** Style `Button`, `Input`, `Dialog`, `NavigationMenu`, `Card`, etc. with portal CSS tokens and Tailwind classes. Some exports (for example `Skeleton` and media players) do include styles: inspect the installed component before styling. Key gotchas verified in source: `Button` has no `variant`/`size` props; `navigationMenuTriggerStyle()` returns `""`; `Badge` accepts but silently strips its `variant` prop before rendering.
|
|
18
|
+
|
|
19
|
+
**Do not force a visual redesign** when a parity requirement (legacy andromeda match or Figma spec) exists. Use `webs-sdk/ui` for accessible structure; reproduce the exact visual via CSS.
|
|
20
|
+
|
|
21
|
+
See `references/ui.md` for styling patterns, the complete verified export map, and what is **not** in the barrel.
|
|
@@ -20,11 +20,13 @@ Choose an existing export before writing portal-specific code. Names below refle
|
|
|
20
20
|
|
|
21
21
|
## UI entry: `webs-sdk/ui`
|
|
22
22
|
|
|
23
|
+
Most structural primitives are **unbranded** Radix or native wrappers. Many emit `data-slot` attributes for CSS targeting and forward `className`; some exports (for example `Skeleton` and media players) include built-in classes. Apply portal visuals via `className` or `[data-slot]` selectors. Verify the installed barrel at `node_modules/webs-sdk/dist/components/ui/index.d.ts`; `references/ui.md` lists exceptions and styling patterns.
|
|
24
|
+
|
|
23
25
|
| Goal | Export | Decision |
|
|
24
26
|
| --- | --- | --- |
|
|
25
27
|
| Prop-configured video/audio | `ConfiguredMediaPlayer` | Preferred new Radix player for a ready-to-use layout. Set `src`, optional `poster`, `tracks`, `sources`, `controls`; see `references/integration.md` and installed `docs/CONFIGURED_MEDIA_PLAYER.md`. |
|
|
26
28
|
| Custom media controls | `MediaPlayer` plus `MediaPlayerVideo` / `MediaPlayerAudio`, `MediaPlayerControls`, `MediaPlayerPlay`, `MediaPlayerSeek`, `MediaPlayerTime`, `MediaPlayerVolume`, `MediaPlayerSettings`, `MediaPlayerFullscreen`, etc. | Composable Radix parts; root alone does not create media or controls. |
|
|
27
29
|
| Existing/legacy video integration | `VideoPlayer` | Different API (`videoUrl`, `posterImage`, `languages`); retain for existing consumers. |
|
|
28
|
-
| Standard UI primitives | `Button
|
|
30
|
+
| Standard UI primitives | `Button` (no variants — unstyled slot), `Input`, `Dialog`/parts, `DropdownMenu`/parts, `Tabs`/parts, `Select`/parts, `Tooltip`/parts, `Avatar`/parts, `Accordion`/parts, `Alert`, `Badge` (variant prop stripped), `Carousel`, `Checkbox`, `NavigationMenu`/parts (`navigationMenuTriggerStyle` returns `""`), `Textarea`, `Card`/parts, `Separator`, `Skeleton`, `Field`/parts, `Item`/parts, `InputGroup`/parts, `ButtonGroup`/parts, `Breadcrumb`/parts, `HoverCard`/parts, `AlertDialog`/parts, `Collapsible`/parts, `ContextMenu`/parts, `AspectRatio`, `Label` | Prefer exported primitives over direct `@radix-ui/*` imports when the SDK offers an equivalent. |
|
|
29
31
|
|
|
30
32
|
Both entry points have independent barrels. Import from `webs-sdk/ui` for UI, not `webs-sdk` or `webs-sdk/dist/...`. All React UI must run with a suitable client boundary and styling; consult `references/integration.md`.
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
# webs-sdk/ui — UI governance for portal consumers
|
|
2
|
+
|
|
3
|
+
Import path: `from 'webs-sdk/ui'`
|
|
4
|
+
Authoritative export list: `node_modules/webs-sdk/dist/components/ui/index.d.ts`
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Rule 1 — Prefer existing `webs-sdk/ui` exports over direct `@radix-ui` imports
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
// ✅ Correct
|
|
12
|
+
import { Dialog, DialogContent, DialogTrigger } from 'webs-sdk/ui';
|
|
13
|
+
import { Tabs, TabsList, TabsTrigger, TabsContent } from 'webs-sdk/ui';
|
|
14
|
+
import { NavigationMenu, NavigationMenuList, NavigationMenuItem } from 'webs-sdk/ui';
|
|
15
|
+
|
|
16
|
+
// ❌ Wrong — creates version drift, duplicate bundle, breaks governance
|
|
17
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
The SDK exports many Radix-backed primitives with `data-slot` attributes. Verify the barrel first; use existing exports rather than duplicating them locally. Direct Radix imports for already-exported primitives risk version drift.
|
|
21
|
+
|
|
22
|
+
If a primitive you need is **missing from `webs-sdk/ui`**: report the gap and add it to the SDK source (`src/components/ui/`) rather than adding a direct Radix dep to the portal.
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Rule 2 — Primitives are intentionally unstyled; you own all visual CSS
|
|
27
|
+
|
|
28
|
+
Most structural components wrap a Radix primitive or native element, expose a `data-slot` attribute and forward applicable props including `className`. Check each export for exceptions and built-in styles rather than assuming every primitive has the same implementation.
|
|
29
|
+
|
|
30
|
+
**Exceptions with minimal built-in classes:**
|
|
31
|
+
- `TooltipContent` — positioning and open/close animation classes
|
|
32
|
+
- `Skeleton` — `animate-pulse rounded-md bg-muted`
|
|
33
|
+
- `ConfiguredMediaPlayer` / `media-player` — rich layout classes for media controls
|
|
34
|
+
|
|
35
|
+
**Verified gotchas** (do not assume CVA variants exist):
|
|
36
|
+
|
|
37
|
+
| Component | Gotcha |
|
|
38
|
+
|---|---|
|
|
39
|
+
| `Button` | **No `variant` or `size` props.** Plain unstyled slot. Add your own via `className`. |
|
|
40
|
+
| `navigationMenuTriggerStyle()` | **Returns `""`** (empty string). Apply link/trigger styles yourself. |
|
|
41
|
+
| `Badge` | Accepts `variant?: "default"\|"outline"\|"secondary"\|"destructive"` but **silently strips it** before rendering. No variant classes are applied. |
|
|
42
|
+
| `Item` | Has `variant`/`size` props but outputs empty CVA strings — they become `data-variant`/`data-size` DOM attributes for CSS targeting only. |
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Rule 3 — Style via `className` or `[data-slot]` CSS; keep primitives unbranded
|
|
47
|
+
|
|
48
|
+
### Pattern A — inline `className` (component-level)
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from 'webs-sdk/ui';
|
|
52
|
+
|
|
53
|
+
<Dialog>
|
|
54
|
+
<DialogTrigger className="rounded-full bg-[var(--color-primary)] px-6 py-2 text-sm font-semibold">
|
|
55
|
+
Open
|
|
56
|
+
</DialogTrigger>
|
|
57
|
+
<DialogContent className="rounded-2xl bg-[var(--color-bg-card)] border border-[var(--color-border)] p-8 max-w-lg">
|
|
58
|
+
<DialogHeader className="mb-4">
|
|
59
|
+
<DialogTitle className="text-xl font-semibold text-[--color-text-base]">
|
|
60
|
+
Title
|
|
61
|
+
</DialogTitle>
|
|
62
|
+
</DialogHeader>
|
|
63
|
+
</DialogContent>
|
|
64
|
+
</Dialog>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Pattern B — `[data-slot]` in `globals.css` (theme-wide)
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
/* globals.css — applies to all Dialog instances in the portal */
|
|
71
|
+
[data-slot="dialog-content"] {
|
|
72
|
+
border-radius: 1rem;
|
|
73
|
+
background: var(--color-bg-card);
|
|
74
|
+
border: 1px solid var(--color-border);
|
|
75
|
+
padding: 2rem;
|
|
76
|
+
}
|
|
77
|
+
[data-slot="dialog-title"] {
|
|
78
|
+
font-size: 1.25rem;
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
color: var(--color-text-base);
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Pattern C — thin portal wrapper (Figma-exact layout)
|
|
85
|
+
|
|
86
|
+
Wrap `webs-sdk/ui` parts in a portal component when you need Figma-specific structure (custom close icon, extra sections, specific variants):
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
// src/components/ui/PortalDialog.tsx
|
|
90
|
+
'use client';
|
|
91
|
+
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from 'webs-sdk/ui';
|
|
92
|
+
import { cn } from '@/lib/utils';
|
|
93
|
+
|
|
94
|
+
export function PortalDialog({ title, trigger, children, className }: Props) {
|
|
95
|
+
return (
|
|
96
|
+
<Dialog>
|
|
97
|
+
<DialogTrigger asChild>{trigger}</DialogTrigger>
|
|
98
|
+
<DialogContent className={cn('rounded-2xl bg-[var(--color-bg-card)] p-8', className)}>
|
|
99
|
+
<DialogHeader>
|
|
100
|
+
<DialogTitle>{title}</DialogTitle>
|
|
101
|
+
</DialogHeader>
|
|
102
|
+
{children}
|
|
103
|
+
</DialogContent>
|
|
104
|
+
</Dialog>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Rule 4 — Parity requirement overrides design system preference
|
|
112
|
+
|
|
113
|
+
When a portal must match legacy andromeda visually (or a Figma spec produced before this governance rule), **do not force a redesign**. Use `webs-sdk/ui` for accessible behaviour; reproduce the legacy visual exactly via CSS custom properties. Parity wins.
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## NavigationMenu — navbar pattern
|
|
118
|
+
|
|
119
|
+
`navigationMenuTriggerStyle()` returns `""` — do not call it expecting classes:
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink } from 'webs-sdk/ui';
|
|
123
|
+
|
|
124
|
+
<NavigationMenu className="hidden md:flex">
|
|
125
|
+
<NavigationMenuList className="flex items-center gap-1">
|
|
126
|
+
{pages.map(page => (
|
|
127
|
+
<NavigationMenuItem key={page.url}>
|
|
128
|
+
<NavigationMenuLink
|
|
129
|
+
href={page.url}
|
|
130
|
+
className="rounded-lg px-4 py-2 text-sm font-medium text-[var(--color-text-base)] hover:bg-[var(--color-bg-hover)]"
|
|
131
|
+
>
|
|
132
|
+
{page.label}
|
|
133
|
+
</NavigationMenuLink>
|
|
134
|
+
</NavigationMenuItem>
|
|
135
|
+
))}
|
|
136
|
+
</NavigationMenuList>
|
|
137
|
+
</NavigationMenu>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## Tailwind v4 scan — required for ConfiguredMediaPlayer
|
|
143
|
+
|
|
144
|
+
`webs-sdk/ui` components that use Tailwind classes (media players, Skeleton, TooltipContent) are inside `node_modules`, which Tailwind v4 does not scan by default. Without this, player controls appear unstyled:
|
|
145
|
+
|
|
146
|
+
```css
|
|
147
|
+
/* portal globals.css or main CSS file */
|
|
148
|
+
@source "../../node_modules/webs-sdk/dist/components/ui";
|
|
149
|
+
/* adjust relative path to match where this CSS file lives */
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
See `node_modules/webs-sdk/docs/CONFIGURED_MEDIA_PLAYER.md` for the canonical path example.
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
## What is NOT in `webs-sdk/ui` (verify before use)
|
|
157
|
+
|
|
158
|
+
The following are **not** confirmed exports in the barrel at time of writing — always check `node_modules/webs-sdk/dist/components/ui/index.d.ts`:
|
|
159
|
+
|
|
160
|
+
- `Popover` (not exported)
|
|
161
|
+
- `Switch`
|
|
162
|
+
- `RadioGroup`
|
|
163
|
+
- `Progress`
|
|
164
|
+
- `Slider` (as a named export — Radix slider dep exists but verify export)
|
|
165
|
+
|
|
166
|
+
Never assume a component is available because a similar shadcn component exists. Verify, then use.
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## Design token conventions (portals)
|
|
171
|
+
|
|
172
|
+
Portal tokens live in `globals.css` under `:root` and `@theme inline` (Tailwind v4):
|
|
173
|
+
|
|
174
|
+
```css
|
|
175
|
+
:root {
|
|
176
|
+
--portal-primary: #ff8546;
|
|
177
|
+
--portal-card: #1a1a1a;
|
|
178
|
+
--portal-text: #fdfbff;
|
|
179
|
+
--portal-border: rgba(255,255,255,0.12);
|
|
180
|
+
--color-primary: var(--portal-primary);
|
|
181
|
+
--color-bg-card: var(--portal-card);
|
|
182
|
+
--color-text-base: var(--portal-text);
|
|
183
|
+
--color-border: var(--portal-border);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@theme inline {
|
|
187
|
+
--color-primary: var(--portal-primary);
|
|
188
|
+
--color-card: var(--portal-card);
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
Reference in component `className`:
|
|
193
|
+
```tsx
|
|
194
|
+
<Card className="bg-card border border-[var(--portal-border)] rounded-2xl p-6">
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
Keep primitives unbranded (no portal-specific defaults baked in). In `next_template`, put shared tokens in `src/styles/globals.css` and portal overrides in `public/themes/{name}.css` loaded after it; follow the consumer's actual theme setup.
|